Android自定义View：实现onDraw绘制圆形的触摸拖动功能

嘿，我来帮你搞定这个拖动圆形的需求！其实核心就是把每个圆形的状态存起来，再通过触摸事件跟踪手指动作来更新位置，我一步步给你拆解实现步骤：

1. 先给圆形创建数据模型 #

首先你需要把每个圆形的属性（坐标、半径）单独存成一个类，这样拖动的时候才能方便修改它的位置。比如创建一个简单的Circle类：

public class Circle {
    public float x;
    public float y;
    public float radius;
    public Paint paint; // 如果每个圆颜色不同，也可以存在这里

    public Circle(float x, float y, float radius, Paint paint) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.paint = paint;
    }
}

然后在你的CustomView里添加集合管理所有圆形：

public class CustomView extends View {
    // 新增：存储所有圆形的列表
    private List<Circle> mCircles = new ArrayList<>();
    // 新增：记录当前被选中的圆形（用于拖动）
    private Circle mSelectedCircle;
    // 新增：触摸点相对于选中圆圆心的偏移量（避免拖动时圆心跳去手指位置）
    private float mTouchOffsetX;
    private float mTouchOffsetY;
    // 你的原有字段（网格相关、画笔等）
    private Paint mGridPaint;
    // ... 其他原有代码

2. 重写onTouchEvent处理触摸逻辑 #

不用额外加TouchListener，直接重写View自带的onTouchEvent方法，处理三个关键触摸事件：

@Override
public boolean onTouchEvent(MotionEvent event) {
    float touchX = event.getX();
    float touchY = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 按下时，判断触摸点是否在某个圆内
            mSelectedCircle = findCircleAtPoint(touchX, touchY);
            if (mSelectedCircle != null) {
                // 计算手指相对于圆心的偏移量
                mTouchOffsetX = touchX - mSelectedCircle.x;
                mTouchOffsetY = touchY - mSelectedCircle.y;
                return true; // 告诉系统我们要处理这个触摸事件
            }
            break;

        case MotionEvent.ACTION_MOVE:
            // 如果有选中的圆，更新它的位置
            if (mSelectedCircle != null) {
                // 用手指位置减去偏移量，得到新的圆心坐标
                mSelectedCircle.x = touchX - mTouchOffsetX;
                mSelectedCircle.y = touchY - mTouchOffsetY;
                invalidate(); // 触发重绘，更新视图
                return true;
            }
            break;

        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            // 抬起或取消触摸时，清空选中标记
            mSelectedCircle = null;
            break;
    }
    return super.onTouchEvent(event);
}

// 辅助方法：找到触摸点所在的圆形
private Circle findCircleAtPoint(float x, float y) {
    // 倒序遍历（让上层的圆优先被选中）
    for (int i = mCircles.size() - 1; i >= 0; i--) {
        Circle circle = mCircles.get(i);
        // 用平方计算，避免开根号，性能更好
        float dx = x - circle.x;
        float dy = y - circle.y;
        if (dx * dx + dy * dy <= circle.radius * circle.radius) {
            return circle;
        }
    }
    return null;
}

3. 修改onDraw方法，基于mCircles列表绘制圆形 #

原来的onDraw里应该是直接绘制固定位置的圆，现在改成遍历mCircles列表来绘制：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 先绘制网格（你的原有代码）
    drawGrid(canvas);
    // 再绘制所有圆形
    for (Circle circle : mCircles) {
        canvas.drawCircle(circle.x, circle.y, circle.radius, circle.paint);
    }
}

额外提示 #

• 如果需要让圆形拖动时对齐网格，可以在ACTION_MOVE更新坐标的时候，把mSelectedCircle.x和mSelectedCircle.y处理成网格的整数倍（比如网格间距是50dp，就把坐标取整到50的倍数）。
• 如果你的圆形是动态添加的，记得在合适的时机（比如初始化、用户点击添加）把Circle对象加入mCircles列表。

内容的提问来源于stack exchange，提问作者user9558800