4

タッチ イベントで動作するペイント スタイルのアプリケーションがあります。

例

JavaScriptコードは...

var RADIUS = 10;
var ctx = document.querySelector("canvas").getContext("2d");

var getRandomColorFragment = function () {
    return Math.floor(Math.random() * 255);
};

document.body.addEventListener("touchstart", function (event) {
    ctx.fillStyle = "rgb(" + [getRandomColorFragment(), getRandomColorFragment(), getRandomColorFragment()].join() + ")";
});

document.body.addEventListener("touchmove", function (event) {
    // Prevent default behavior of scrolling elements.
    event.preventDefault();

    // Get a reference to the first touch placed.
    var touch = event.touches[0];

    // Draw a circle at the location of the finger.
    ctx.beginPath();
    ctx.arc(touch.pageX - RADIUS, touch.pageY - RADIUS, RADIUS, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
});

jsFiddle .

タッチ イベントをサポートしていないプラットフォームでこれをテストするには、Chrome を使用し、Web インスペクターの設定を開いて [タッチ イベントのエミュレート]を選択します。

指/ポインターが非常に速く動くと、予期されるようにキャンバスを継続的にペイントできません (上のスクリーンショットを参照)。touchmoveイベントがトリガーされるのと同じ速さでしかタッチの座標を取得できないようです。

距離の式 ( ) を使用して弧の間に十分な大きさのギャップがあるかどうかを判断し、それが定数c2 = a2 + b2よりも大きいかどうかを判断できると考えました。RADIUSこの部分はうまくいきました。次に把握する必要があったのは、2 つの点 (以前に登録されたタッチの座標と新しく登録された座標) の間を補間する方法です。

したがって、本質的に、ギャップを埋める方法を決定する必要がある 2 つのポイント間を補間する方法を知りたいと思います。

4

1 に答える 1

11

最後のマウス位置から新しいマウス位置まで線を引きたいとします。しかし、代わりに新しい位置に円を描いています。なんで？

どうしてこうしないの？

onTouchStart: ctx.moveTo(x,y);

onTouchMove: ctx.lineTo(x,y);

すべての補間、アンチエイリアシングなどは、「lineTo」関数に既に含まれています。ctx.lineCap = "round";角を丸くするために使用 します。

それでも数値を補間したい場合は、次の関数があります。

function interpolate(a, b, frac) // points A and B, frac between 0 and 1
{
    var nx = a.x+(b.x-a.x)*frac;
    var ny = a.y+(b.y-a.y)*frac;
    return {x:nx,  y:ny};
}

interpolate({x:2, y:2}, {x:4,y:4}, 0.5); // returns {x:3, y:3}
于 2013-06-19T12:45:52.210 に答える