Question

我需要一个如何在Android下实现以下功能的建议：

我需要一个代表图形（来自离散数学）的图像，带有顶点和边，我可以点击每个顶点或边缘并触发不同的动作。

请告诉我如何实现此目标（可能使用imagebuttons）或其他方法来表示此功能。

Answer 1

我很无聊，所以我编写了这个粗略的例子...... 它假设点之间有直边。

public class App extends Activity
{
    PlotView plot;
    @Override
    public void onCreate(Bundle sis)
    {
        super.onCreate(sis);
        plot = new PlotView(this);
        setContentView(plot);
    }

    public class PlotView extends View
    {
        Paint paint1 = new Paint();
        Paint paint2 = new Paint();
        Point[] points = new Point[10];

        public PlotView(Context context)
        {
            super(context);
            paint1.setColor(Color.RED);
            paint2.setColor(Color.BLUE);
            for (int i = 0; i < points.length; i++)
            {
                points[i] = new Point();
                points[i].x = (float) (Math.random() * 320);
                points[i].y = (float) (Math.random() * 480);
            }
            Arrays.sort(points);
        }

        @Override
        protected void onDraw(Canvas canvas)
        {
            canvas.drawColor(Color.WHITE);
            for (int i = 0; i < points.length; i++)
            {
                if (i < points.length - 1)
                {
                    canvas.drawLine(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, paint2);
                }
                canvas.drawCircle(points[i].x, points[i].y, 5, paint1);             
            }
            super.onDraw(canvas);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event)
        {
            switch(event.getAction())
            {
                case MotionEvent.ACTION_DOWN:
                {
                    float x = event.getX();
                    float y = event.getY();

                    int hitPoint = -1;
                    int closestLeft = -1;
                    int closestRight = -1;

                    for (int i = 0; i < points.length; i++)
                    {
                        float dx = x - points[i].x;
                        float dy = y - points[i].y;

                        if(i < points.length - 1)
                        {
                            if(points[i].x < x && x < points[i + 1].x)
                            {
                                closestLeft = i;
                                closestRight = i + 1;
                            }
                        }

                        if (Math.abs(dx) <= 16.0f && Math.abs(dy) <= 16.0f)
                        {
                            hitPoint = i;
                            break;
                        }
                    }
                    if (hitPoint != -1)
                    {
                        Toast.makeText(getContext(), "Hit Point: " + hitPoint, Toast.LENGTH_SHORT).show();                      
                    }
                    else                        
                    if(closestLeft != -1 && closestRight != -1)
                    {
                        float dx = points[closestLeft].x - points[closestRight].x;
                        float dy = points[closestLeft].y - points[closestRight].y;

                        final float u = ((x - points[closestLeft].x) * dx + (y - points[closestLeft].y) * dy) / (dx * dx + dy * dy);

                        float px = points[closestLeft].x + u * dx;
                        float py = points[closestLeft].y + u * dy;

                        if (Math.abs(x - px) <= 16.0f && Math.abs(y - py) <= 16.0f)
                        {
                            Toast.makeText(getContext(), "Hit Line Between: " + closestLeft + " & " + closestRight, Toast.LENGTH_SHORT).show();
                        }
                    }                   
                }
            }
            return super.onTouchEvent(event);
        }

        public class Point implements Comparable<Point>
        {
            float x;
            float y;
            @Override
            public int compareTo(Point other)
            {
                if (x < other.x) return -1;
                if (x > other.x) return 1;
                return 0;
            }
        }       
    }
}

Answer 2

我可以想象如何使用SurfaceView执行此操作：

创建一个Vertex类，其中包含一个x，y坐标，表示绘制顶点的位置。如果您的顶点是圆的png图像，则图像的左上角x，y坐标存储在Vertex类中。
将所有的顶点放在List中，并迭代并绘制每个顶点。
边缘更复杂，因为它们可能会纵横交错或弯曲。
- 假设它们是直线，那么你可以有一个Edge类，它包含起始的x，y和结束的x，y坐标。
- 您可以遍历List个Edge并相应地绘制线条

为了检测用户何时点击它们，您应该覆盖onTouch方法并检查event.rawX()和event.rawY()值，看它们是否与Vertex或Edge匹配类。

对于Vertex课程，您可以查看x <= event.rawX <= x + image_width和y <= event.rawY <= y + image_height
对于Edge，您可以检查在event.rawX, event.rawY类中存储的两组坐标形成的行中是否找到了Edge坐标。

我使用了类似的方法在游戏中绘制一组节点。我不太确定如何做到这一点 - 我概述的方法只有在它们是直的并且不会纵横交错的情况下才有效。

我确信使用openGL有更好的方法，但我之前没有使用过openGL。

希望你能从中得到一些想法。

Answer 3

我认为你最好使用SurfaceView：

http://developer.android.com/reference/android/view/SurfaceView.html

将onTouchEvent（）作为整体处理到曲面，并将其映射到图像中的基础实体。如果你正在计算绘图，你可以很容易地创建一个可点击区域的地图，并抓住触摸事件的X和Y，以确定它是否与图像中的元素相对应。

如果您确实拥有图像，例如已经处理过的PNG，您需要某种方式来携带触摸事件区域。取决于图像的来源。

Answer 4

根据Android的帮助，“绘制到视图，当你想要绘制不需要动态改变的简单图形并且不是性能密集型游戏的一部分时，它是你的最佳选择。”例如，这是制作蛇或国际象棋比赛的正确方法。所以我没有看到建议使用SurfaceView这一点，它只会使事情过于复杂。

对于可点击区域，您可以覆盖公共布尔值onTouchEvent（MotionEvent事件），您可以在其中管理点击的x和y坐标，以识别点击的区域。

具有可点击区域的Android图片

4 个答案: