如何在Android上触摸事件的曲线上移动图像？

Question

我在画布上绘制了一个Cubic Curve

 myPath.cubicTo(10, 10, w, h/2, 10, h-10);

我在该屏幕上有四个ImageView,当我用触摸拖动图像时,我想在绘制的曲线上移动ImageViews.

我已经提到了这些链接:

在曲线路径上移动图像

在曲线上移动对象

在曲线上移动imageview

我得到的是,动画在曲线上移动图像的持续时间由t定义.但我想仅在该曲线区域的方向上触摸ImageView.

以下是我的屏幕:

所以,我希望所有(x,y) co-ordinates曲线都只在该曲线上移动ImageView.

否则,我想要一个方程式绘制曲线,以便我可以为触摸的y值插入x值.

我已经瞪了很多但没有成功.任何建议或指导都会对我有所帮助.

Answer 1

途径

我建议采用与bezier不同的方法,因为你需要为它重现数学以获得位置.

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

三角

例如:

这个在线演示产生了这个结果(为了演示而简化版本):

使用圆和角度位置定义一个数组,而不是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();
}

渲染遍历球阵列并以角度+ 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)];
}

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

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

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

随意采用和修改,以满足您的需求.