MainActivity.java

Question

我需要创建一系列同心椭圆（环），并且需要在这些椭圆的圆周上放置用户图标。见下图。

Rings View

到目前为止，我已经在画布上绘制了3个椭圆同心圆。放置用户图标。我需要用户图标可以在整个环中拖动。

请提供实施方法。

Answer 1

由于看起来你已经在戒指的圆周上放置了图标，我假设您知道如何进行数学运算[但请参见编辑]以确定沿圆周的点并询问拖放情况

您可能希望使用拖放方法实现图标移动。假设您将环保持为单个图像，那么您将只有一个放置目标。然后，您需要以数学方式分析掉落点[请参阅编辑]（通过确定其像素颜色）以确定图标被放入哪个环。如果为环创建单独的视图，则每个视图都可以是其自己的放置点。（你可能需要最终弄清楚如何在每个环中重新分配图标，但这是一个不同的问题。）

以下是一些代码，它显示了使用单个视图组（您将显示环图像）上的单个图像图标来处理拖放的最小方法。

MainActivity.java

package com.example.dragexample;

import android.app.Activity;
import android.content.ClipData;
import android.os.Bundle;
import android.util.Log;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.DragShadowBuilder;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class MainActivity extends Activity {

static final String TAG = "DragActivity";

ImageView icon = null;


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    findViewById(R.id.rings).setOnDragListener(new OnDragListener() {
        @Override
        public boolean onDrag(View vw, DragEvent event) {
            if (event.getAction() == DragEvent.ACTION_DROP) {
                // Drop the icon and redisplay it:
                icon.setX(event.getX());
                icon.setY(event.getY());
                icon.setVisibility(View.VISIBLE);

                // Analyze the drop point mathematically (or perhaps get its pixel color)
                //  to determine which ring the icon has been dragged into and then take
                //  appropriate action.
                int destRing = determineDestinationRing(event.getX(), event.getY());
            }

            return true;
        }
    });

    icon = (ImageView) findViewById(R.id.icon);
    icon.setOnTouchListener(new OnTouchListener() {
        public boolean onTouch(View vw, MotionEvent event) {
            Log.v(TAG, "Touch event " + event.getAction());
            if (event.getActionMasked() == MotionEvent.ACTION_MOVE) {
                Log.v(TAG, "Starting drag");

               // Set up clip data (empty) and drag shadow objects and start dragging:
                ClipData cd = ClipData.newPlainText("", "");
                DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(vw);
                vw.startDrag(cd, shadowBuilder, vw, 0);
                vw.setVisibility(View.INVISIBLE);
            }

            return true;
        }
    });
}

public void resetImage(View vw) {
    Log.v(TAG, "Resetting image position");

    icon.setX(0f);
    icon.setY(0f);
    icon.setVisibility(View.VISIBLE);
}

}

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/rings"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:onClick="resetImage" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

编辑1：

为了在数学上确定图标被放入哪个环，您可以使用类似下面的内容，它使用轴的硬编码尺寸循环执行椭圆的标准公式。请注意，如果在最里面的“我”环中放置了一个图标，则会返回零。此外，这种方法在实践中将更具挑战性，因为在渲染布局时可能会调整屏幕上的铃声大小。在这种情况下，轴的最终尺寸需要在运行时确定。

// Axis values must be ascending order; ring 0 is 'me';
float a[] = {50, 100, 150, 200};
float b[] = {100, 200, 300, 400};

public int determineDestinationRing(float x, float y) {

    // Check for inclusion within each ring:
    for (int i = 0; i < a.length; i++) {
        if (((x * x) / (a[i] * a[i]) + (y * y) / (b[i] * b[i])) <= 1)
            return i;
    }

    return -1;
}

Answer 2

要解决此问题，您需要使用椭圆方程式：

（x / a）² +（y / a）² = 1 ，

其中：
  x，y是椭圆周长上任意点的坐标   a，b分别是x和y轴上的半径。

当用户拖放图标时，如果图标的中心坐标与椭圆周长相交，则上述公式应保持良好状态。在这种情况下，您可以将图标放在椭圆上。由于你有3个省略号，你必须多次检查，其中每个省略一次。

public class CustomView extends View {

        // Other methods 

        public boolean onTouchEvent(MotionEvent e) {
            int index = e.getActionIndex();
            float x = e.getX(index);
            float y = e.getY(index);

            int a = this.getWidth()/2;
            int b = this.getHeight()/2;

            // x-a instead of x and y-b instead of y, to get the offset from centre of ellipse.
            double result = Math.pow(((x-a)/a), 2) + Math.pow(((y-b)/b), 2);

            Log.v(TAG, "(" + (x-a) + "/" + a + ")2 + (" + (y-b) + "/" + b + ")2 = " + result);

            return true;
        }
}

Answer 3

我会这样做。首先，我们需要检测TOUCH_DOWN事件触及的图标。这可以通过比较触摸点和图标坐标来完成。一旦找到最接近的图标，我们还应该知道该图标属于哪个椭圆，这意味着我们知道该椭圆的水平和垂直半径。我们也知道椭圆中心的坐标。

然后，这是我们将要做的事情的想法。我们将计算通过触摸点绘制的线与椭圆中心和通过中心绘制的水平线之间的角度。

               o <- touch point
              /
             / \ <- angle
  center->  o-----  <- horizontal line

现在，在知道角度后，我们将使用调整为椭圆的圆的方程，重新计算新图标的坐标，将我们的图标精确地粘贴到该椭圆上。我们去算法吧。

要检测触摸角度，我们将使用atan2功能。

double atan2Angle = Math.atan2(touchY - centerY, touchX - centerX);

这将根据角度给出以下值。

        -π
   -2*π      -0
         o          <- center 
    2*π       0
         π

为了能够在圆的等式中使用这个角度，我们需要将它转换为更传统的呈现，如下所示。

        270°

   180°  o    0°/360°

         90°

可以这样做。

    float angleFactor = (float) (atan2Angle / 2 * Math.PI);
    if (angleFactor < 0) {
        angleFactor += 1f;
    }

    float touchAngle = angleFactor * 360f;
    if (angle < 0) {
        angle += 360f;
    }

现在，在我们获得了度数的触摸角度后，我们可以使用椭圆方程计算图标的新坐标。

double touchAngleRad = Math.toRadians(touchAngle);
float iconX = centerX + (float) (radiusX * Math.cos(touchAngleRad));
float iconY = centerY + (float) (radiusY * Math.sin(touchAngleRad));

// centerX, centerY - coordinates of the center of ellipses
// radiusX, radiusY - horizontal and vertical radiuses of the ellipse, to which 
//                    the touched icon belongs
// iconX, iconY     - new coordinates of the icon lying on that ellipse

如果您在每个TOUCH_MOVE上根据此算法重新计算图标位置并使视图无效，那么您的图标将在其椭圆上移动。

可以使用弧度而不是度数进一步优化代码，但我认为度数更适合解释。希望这有帮助。如果您遇到任何实施问题，请发布您的代码。

Android中的椭圆视图

3 个答案:

MainActivity.java

activity_main.xml中

编辑1：