Android自定义视图锚点旋转时位置偏移问题求解

问题场景 #

我实现了一个名为MyView的自定义View，带有两个锚点，需求如下：

• 点击View本体时可平移视图
• 点击其中一个锚点时，以另一个锚点为旋转中心，拖动该锚点实现视图旋转

目前遇到的问题是：首次旋转功能正常，但切换到另一个锚点旋转时，视图会跳转到错误位置。原因是每次更新旋转支点时，View的原生变换状态会被重置，之前的平移、旋转记录丢失。参考Qt的链式变换思路（保存变换列表或使用相对变换），但Android View没有直接的setMatrix()方法，需要适配Android平台的解决方案。

核心解决方案：手动维护累计变换矩阵 #

Android View的原生变换属性（translationX/Y、rotation、pivotX/Y）是基于当前支点计算的，切换支点会破坏之前的变换关联。因此我们可以绕过原生属性，手动维护一个累计变换矩阵，所有平移、旋转操作都通过矩阵叠加，确保变换状态不会丢失。

实现要点 #

1. 定义全局矩阵保存所有历史变换，所有操作基于原始坐标系叠加，不依赖View原生变换属性
2. 触摸事件处理时，先将触摸坐标转换到View原始坐标系，再计算变换量
3. 在onDraw阶段通过Canvas应用累计变换，确保View内容和锚点正确显示

完整代码示例 #

public class MyView extends View {
    private final Matrix mTotalTransform = new Matrix();
    private final Matrix mInverseTransform = new Matrix();
    private final PointF mAnchor1 = new PointF(50, 50);  // 原始锚点1坐标
    private final PointF mAnchor2 = new PointF(250, 50); // 原始锚点2坐标
    private final PointF mLastTouchPos = new PointF();
    private int mCurrentMode = MODE_IDLE;

    // 触摸模式常量
    private static final int MODE_IDLE = 0;
    private static final int MODE_TRANSLATE = 1;
    private static final int MODE_ROTATE_ANCHOR1 = 2; // 以锚点2为中心旋转
    private static final int MODE_ROTATE_ANCHOR2 = 3; // 以锚点1为中心旋转

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 将触摸点转换到View原始坐标系
        float[] touchPos = {event.getX(), event.getY()};
        mTotalTransform.invert(mInverseTransform);
        mInverseTransform.mapPoints(touchPos);
        float x = touchPos[0];
        float y = touchPos[1];

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastTouchPos.set(x, y);
                // 判断触摸目标是锚点还是View本体
                if (isPointInAnchor(x, y, mAnchor1)) {
                    mCurrentMode = MODE_ROTATE_ANCHOR1;
                } else if (isPointInAnchor(x, y, mAnchor2)) {
                    mCurrentMode = MODE_ROTATE_ANCHOR2;
                } else {
                    mCurrentMode = MODE_TRANSLATE;
                }
                return true;
            case MotionEvent.ACTION_MOVE:
                if (mCurrentMode == MODE_TRANSLATE) {
                    // 计算平移量并叠加到变换矩阵
                    float dx = x - mLastTouchPos.x;
                    float dy = y - mLastTouchPos.y;
                    mTotalTransform.postTranslate(dx, dy);
                    mLastTouchPos.set(x, y);
                    invalidate();
                } else if (mCurrentMode == MODE_ROTATE_ANCHOR1) {
                    // 计算角度变化，以锚点2为中心旋转
                    float prevAngle = calculateAngle(mAnchor2, mLastTouchPos);
                    float currAngle = calculateAngle(mAnchor2, new PointF(x, y));
                    float deltaAngle = currAngle - prevAngle;
                    mTotalTransform.postRotate(deltaAngle, mAnchor2.x, mAnchor2.y);
                    mLastTouchPos.set(x, y);
                    invalidate();
                } else if (mCurrentMode == MODE_ROTATE_ANCHOR2) {
                    // 计算角度变化，以锚点1为中心旋转
                    float prevAngle = calculateAngle(mAnchor1, mLastTouchPos);
                    float currAngle = calculateAngle(mAnchor1, new PointF(x, y));
                    float deltaAngle = currAngle - prevAngle;
                    mTotalTransform.postRotate(deltaAngle, mAnchor1.x, mAnchor1.y);
                    mLastTouchPos.set(x, y);
                    invalidate();
                }
                break;
            case MotionEvent.ACTION_UP:
                mCurrentMode = MODE_IDLE;
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 应用累计变换后绘制内容
        canvas.save();
        canvas.concat(mTotalTransform);
        drawViewBody(canvas);
        drawAnchor(canvas, mAnchor1);
        drawAnchor(canvas, mAnchor2);
        canvas.restore();
    }

    // 判断触摸点是否在锚点范围内
    private boolean isPointInAnchor(float x, float y, PointF anchor) {
        float anchorRadius = 20;
        return Math.hypot(x - anchor.x, y - anchor.y) <= anchorRadius;
    }

    // 计算两点连线相对于X轴的角度
    private float calculateAngle(PointF center, PointF target) {
        float dx = target.x - center.x;
        float dy = target.y - center.y;
        return (float) Math.toDegrees(Math.atan2(dy, dx));
    }

    // 绘制View本体
    private void drawViewBody(Canvas canvas) {
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#4285F4"));
        canvas.drawRect(0, 0, 300, 200, paint);
    }

    // 绘制锚点
    private void drawAnchor(Canvas canvas, PointF anchor) {
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#EA4335"));
        canvas.drawCircle(anchor.x, anchor.y, 20, paint);
    }
}

方案说明 #

• 所有变换通过Matrix.postTranslate()、Matrix.postRotate()叠加，实现链式变换，完全保留历史变换状态
• 触摸坐标先通过逆矩阵转换到原始坐标系，确保平移、旋转的计算基准始终统一，不会因支点切换出现坐标混乱
• 绘制阶段通过Canvas.concat()应用累计变换，View内容和锚点会同步显示在变换后的位置

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