android+移动触摸事件,如何在Android中的触摸事件上在曲线上移动...

途径

我建议使用一种不同于使用贝塞尔曲线的方法,因为您需要为其重现数学才能获得位置.

通过使用简单的三角函数,您可以获得相同的视觉效果,但同时可以完全控制位置.

三角

例如：

THIS ONLINE DEMO产生此结果(为演示起见,为简化版本)：

用圆和角位置而不是y和x位置定义一个数组.您可以稍后过滤角度(例如,仅显示-90到90度之间的角度).

使用角度将确保它们在移动时保持秩序.

var balls = [-90, -45, 0, 45]; // example "positions"

要替换贝塞尔曲线,可以改为：

/// some setup variables

var xCenter = -80, /// X center of circle

yCenter = canvas.height * 0.5, /// Y center of circle

radius = 220, /// radius of circle

x, y; /// to calculate line position

/// draw half circle

ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI);

ctx.stroke();

现在,我们可以使用鼠标移动/触摸等中的Y值在圆上移动：

/// for demo, mousemove - adopt as needed for touch

canvas.onmousemove = function(e) {

/// get Y position which is used as delta to angle

var rect = demo.getBoundingClientRect();

dlt = e.clientY - rect.top;

/// render the circles in new positions

render();

}

渲染遍历ball数组,并以其角度delta渲染它们：

for(var i = 0, angle; i < balls.length; i++) {

angle = balls[i];

pos = getPosfromAngle(angle);

/// draw circles etc. here

}

魔术功能是这样的：

function getPosfromAngle(a) {

/// get angle from circle and add delta

var angle = Math.atan2(delta - yCenter, radius) + a * Math.PI / 180;

return [xCenter + radius * Math.cos(angle),

yCenter + radius * Math.sin(angle)];

}

半径用作伪位置.您可以将其替换为实际的X位置,但坦率地说不需要.

在本演示中,为简单起见,我仅附加了鼠标移动.将鼠标移到画布上可以查看效果.

由于这是演示代码,因此并不是最佳的结构(背景和圆圈的单独渲染等).

随意采用和修改以适合您的需求.