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();
});

js小提琴。

您可以在不支持触摸事件的平台上进行测试，方法是使用 Chrome 并打开 Web Inspector 的设置并选择Emulate touch events。

当手指/指针移动得非常快时，它无法像预期的那样连续绘制画布（参见上面的屏幕截图）。看来我只能在touchmove触发事件时才能获得触摸的坐标。

我认为我可以使用距离公式 ( c2 = a2 + b2) 确定弧之间是否存在足够大的间隙，并确定它是否大于RADIUS常数。这部分工作得很好。我需要弄清楚的下一件事是如何在两点之间进行插值：先前注册的触摸坐标和新注册的坐标。

因此，基本上，我想知道如何在必须确定如何填补空白的两点之间进行插值。

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 回答