如何移动图像上的曲线上触摸事件的Andr​​oid？ [英] How to move image on curve on touch event in android?

问题描述

我画用的画布上三次曲线

  myPath.cubicTo（10，10，W，H / 2，10，H-10）;
 

我有四个ImageView的是屏幕上，我想移动的ImageViews绘制的曲线上，当我拖动图像的触摸。

我刚才提到的链接：

<一个href="http://stackoverflow.com/questions/16237414/image-moving-in-background-along-a-curve-path-android">Move图片上的曲线路径

移动的曲线

移动ImageView的上曲线

我得到的是，动画将图像的曲线与T定义的持续时间。 但是，我想移动的ImageView的触摸中只有曲线区域的方向。

以下是我的屏幕：

所以，我希望所有的（X，Y）坐标曲线移动的ImageView的曲线而已。

否则我想要一个公式来绘制一条曲线，这样我可以插值x值的感动y值。

我瞪大眼睛了很多，但没有成功。 任何意见或指导将帮助我很多。

解决方案

办法

我会建议不同的方法比用贝塞尔，你将需要复制的数学它，以获得的位置。

通过使用简单的三角函数就可以实现同样的视觉效果，但除了完全控制的位置。

三角

例如：

这个在线演示 会产生这样的结果（为简化起见版本演示）：

定义与圆的阵列和的角位置的，而不是Y和X位置。您可以稍后再筛选的角度，如果他们（比如只显示-90度到90度的角度）。

使用的角度将确保它们保持有序的移动时。

  VAR球= [-90，-45，0，45]; //例如阵地
 

要更换贝塞尔曲线，你可以做到这一点，而不是：

  ///一些设置变量
VAR X中心值= -80，/// X中心圈
    圆yCenter = canvas.height * 0.5，/// Y中心
    半径= 220，///半径圆
    X，Y; ///计算​​线位置

///画半圈
ctx.arc（X中心值，yCenter，半径，0，2 * Math.PI）;

ctx.stroke（）;
 

现在，我们可以使用一个Y值从鼠标移动/触摸等走动界：

  ///用于演示，鼠标移动 - 通过根据需要触摸
canvas.onmousemove =功能（E）{

    ///获取将被用作三角洲角度Y位置
    VAR RECT = demo.getBoundingClientRect（）;

    DLT = e.clientY  -  rect.top;

    ///呈现在新位置上的圆
    渲染（）;
}
 

通过球阵列渲染迭代，并且使他们在他们的角度+三角：

 的（VAR I = 0，角度; I＆LT; balls.length;我++）{
    角=球[I]
    POS = getPosfromAngle（角度）;

    ///画圈圈等在这里
}
 

神奇的功能是这样的：

 函数getPosfromAngle（一）{

    ///从圈内得到的角度，并添加三角洲
    VAR角= Math.atan2（三角洲 -  yCenter，半径）+ A * Math.PI / 180;

    返回[X中心值+半径* Math.cos（角度），
            yCenter +半径* Math.sin（角）];
}
 

半径用作伪的位置。你可以用一个实际的X位置代替这个，但坦率地说没有必要。

在本演示中，以保持它的简单，我只连接鼠标移动。移动鼠标在画布上才能看到效果。

由于这是演​​示code这不是结构优化（独立渲染的背景和圆等）。

你可以随意采用和修改，以满足您的需求。

I have drawn a Cubic Curve on canvas using

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

I have four ImageView on that screen and I want to move that ImageViews on the drawn curve when I drag that image with touch.

I have referred the links :

Move Image on Curve Path

Move object on Curve

Move imageview on curve

What I get is, Animation to move the Image on Curve with the duration defined by t. But I want to move that ImageView on touch in direction of that curve area only.

Following is my Screen :

So, I want all the (x,y) co-ordinates of the curve to move ImageView on that curve only.

Else I want an equation to draw a curve so that I can interpolate x value for the touched y value.

I have goggled a lot but didn't succeed. Any advice or guidance will help me a lot.

解决方案

Approach

I would suggest a different approach than using bezier as you would need to reproduce the math for it in order to get the positions.

By using simple trigonometry you can achieve the same visual result but in addition have full control of the positions.

Trigonometry

For example:

THIS ONLINE DEMO produces this result (simplified version for sake of demo):

Define an array with the circles and angle positions instead of y and x positions. You can filter angles later if they (e.g. only show angles between -90 and 90 degrees).

Using angles will make sure they stay ordered when moved.

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

To replace the Bezier curve you can do this instead:

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

Now we can use an Y value from mouse move/touch etc. to move around the circles:

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

The rendering iterates through the balls array and render them in their angle + delta:

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

    /// draw circles etc. here
}

The magic function is this:

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 is used as a pseudo position. You can replace this with an actual X position but is frankly not needed.

In this demo, to keep it simple, I have only attached mouse move. Move the mouse over the canvas to see the effect.

As this is demo code it's not structured optimal (separate render of background and the circles etc.).

Feel free to adopt and modify to suit your needs.

这篇关于如何移动图像上的曲线上触摸事件的Andr​​oid？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！