自定义View缩放与平移问题：双指缩放锚点异常及瞬移故障

这个问题我之前也碰到过，核心原因是你没有在缩放时结合当前的平移偏移量重新计算锚点对应的坐标，加上Canvas变换顺序和手势坐标的转换没处理好，才导致平移后缩放锚点跑偏、重复缩放瞬移的情况。

问题根源拆解 #

你当前的onDraw里先执行translate(dx, dy)再scale，这会让缩放基于平移后的坐标系，但手势获取的双指中点是屏幕坐标，没有转换到已经平移/缩放后的View本地坐标系，而且缩放时没调整dx和dy来适配锚点，自然就会错位。重复缩放的瞬移则是因为每次缩放的坐标基准没对齐，累积误差导致的。

完整解决方案 #

下面是调整后的代码逻辑，核心是在缩放时重新计算平移偏移量，确保锚点（双指中点）的屏幕位置始终不变：

1. 定义核心成员变量

先在自定义View里维护缩放因子、平移偏移量，以及双指中点的记录：

private float scaleFactor = 1.0f; // 初始缩放比例
private float dx = 0f, dy = 0f;   // 平移偏移量
private float lastFocusX, lastFocusY; // 双指中点的本地坐标（用于滚动）
private ScaleGestureDetector scaleDetector;

2. 初始化手势检测器

在View的构造方法里初始化缩放手势检测器：

public CustomView(Context context) {
    super(context);
    scaleDetector = new ScaleGestureDetector(context, new ScaleListener());
}

3. 处理触摸事件（缩放+双指滚动）

统一处理双指缩放和滚动的手势逻辑，关键是在缩放时重新计算dx和dy：

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 先处理缩放手势
    scaleDetector.onTouchEvent(event);

    // 处理双指滚动逻辑
    if (event.getPointerCount() == 2) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_POINTER_DOWN:
                // 记录双指初始中点
                lastFocusX = (event.getX(0) + event.getX(1)) / 2;
                lastFocusY = (event.getY(0) + event.getY(1)) / 2;
                break;
            case MotionEvent.ACTION_MOVE:
                // 计算当前双指中点，更新平移偏移量
                float currentFocusX = (event.getX(0) + event.getX(1)) / 2;
                float currentFocusY = (event.getY(0) + event.getY(1)) / 2;
                dx += currentFocusX - lastFocusX;
                dy += currentFocusY - lastFocusY;
                lastFocusX = currentFocusX;
                lastFocusY = currentFocusY;
                invalidate();
                break;
        }
    }
    return true;
}

4. 实现缩放监听逻辑

这里的核心是根据锚点调整平移偏移量，确保缩放后双指中点的屏幕位置不变：

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        // 计算新的缩放比例，可添加范围限制
        float newScale = scaleFactor * detector.getScaleFactor();
        newScale = Math.max(0.5f, Math.min(newScale, 3.0f)); // 限制0.5-3倍缩放

        // 获取双指中点的屏幕坐标（相对于View左上角）
        float focusX = detector.getFocusX();
        float focusY = detector.getFocusY();

        // 关键：重新计算dx和dy，确保锚点位置在缩放后不变
        dx = focusX - (focusX - dx) * (newScale / scaleFactor);
        dy = focusY - (focusY - dy) * (newScale / scaleFactor);

        scaleFactor = newScale;
        invalidate();
        return true;
    }
}

5. 修正onDraw的变换顺序

现在dx和dy已经是适配缩放后的偏移量，直接按顺序应用变换即可：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    // 先平移，再缩放（因为dx和dy已经考虑了缩放的影响）
    canvas.translate(dx, dy);
    canvas.scale(scaleFactor, scaleFactor);
    
    // 这里绘制你的内容，比如Bitmap、图形等
    // 示例：canvas.drawBitmap(yourBitmap, 0, 0, yourPaint);
    
    canvas.restore();
}

关键原理说明 #

• 在onScale里，我们通过公式dx = focusX - (focusX - dx) * (newScale/scaleFactor)，计算出缩放后需要的平移量，保证双指中点(focusX, focusY)在屏幕上的位置完全不变，这样锚点就始终是双指中间了。
• 双指滚动是基于中点的移动来更新dx和dy，和缩放逻辑共用同一套坐标基准，避免了冲突。

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