我有一个可以处理触摸事件的绘画风格的应用程序。
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 Inspector 的设置并选择 Emulate touch events .
当手指/指针移动得非常快时,它无法像预期的那样连续绘制 Canvas (请参见上面的屏幕截图)。看来我只能在 touchmove
事件被触发时才能获得触摸坐标。
我认为我可以使用距离公式 (c2 = a2 + b2
) 确定弧之间是否有足够大的间隙,并确定它是否大于 RADIUS
常数。这部分效果很好。接下来我需要弄清楚的是如何在两点之间进行插值:先前注册的触摸坐标和新注册的坐标。
因此,从本质上讲,我想知道如何在我必须确定如何填充间隙的两点之间进行插值。
最佳答案
您想从上一个鼠标位置到新的鼠标位置画一条线。但是您在新位置画了一个圆圈。为什么?
你为什么不这样做呢?
onTouchStart: ctx.moveTo(x,y);
onTouchMove: ctx.lineTo(x,y);
所有插值、抗锯齿等都已包含在“lineTo”函数中。使用 ctx.lineCap = "round";
得到圆 Angular 。
如果你还想插入数字,这里是函数:
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}
关于javascript - 用 Canvas 绘图时如何在两点之间进行插值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17190981/