Android Canvas基于支点的捏合缩放异常问题求助

嘿，我太懂你折腾一周的痛苦了——这种缩放支点跳变的坑确实容易踩，尤其是不能用Matrix的时候。咱们先揪出你代码里的核心问题：

你现在直接在Canvas上调用canvas.scale(scale, scale, focusX, focusY)，但这个scale是累积应用的。当切换缩放支点时，新的focusX/Y是当前视图的坐标，而非已经缩放后的画布坐标，这就导致画布突然“跳”到新支点位置，没法保持视觉上的聚焦。

既然不能用Matrix，那咱们手动维护缩放和偏移量来解决，核心思路是：每次缩放时，先把当前触摸支点转换为画布上的实际位置，再调整偏移量，保证缩放后这个支点在屏幕上的位置不变。

修改后的代码实现 #

public class CustomSurfaceView extends SurfaceView implements SurfaceHolder.Callback, ScaleGestureDetector.OnScaleGestureListener {
    private static final String TAG = "CustomSurfaceView";
    private ScaleGestureDetector mScaleDetector;
    // 缩放参数
    private float scale = 1f;
    // 画布偏移量（配合缩放保持支点位置）
    private float translateX = 0f;
    private float translateY = 0f;
    // 缩放开始时的临时状态记录
    private float startScale;

    private List<Pixel> pixels; // 假设你已初始化该列表

    private void init(Context context) {
        mScaleDetector = new ScaleGestureDetector(context, this);
        getHolder().addCallback(this);
        // 其他初始化代码
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        tryDrawing(holder);
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int frmt, int w, int h) {
        tryDrawing(holder);
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {}

    public void tryDrawing() {
        tryDrawing(getHolder());
    }

    private void drawMyStuff(final Canvas canvas) {
        Log.i(TAG, "Drawing...");
        for(Pixel pixel : pixels) {
            drawRect(canvas, pixel); // 你的绘制逻辑保持不变
        }
    }

    public void tryDrawing(SurfaceHolder holder) {
        Log.i(TAG, "Trying to draw...");
        Canvas canvas = holder.lockCanvas();
        if (canvas == null) {
            Log.e(TAG, "Cannot draw onto the canvas as it's null");
            return;
        }
        // 重置画布后，应用我们维护的变换
        canvas.drawColor(Color.WHITE);
        // 先平移再缩放，顺序不能错！
        canvas.translate(translateX, translateY);
        canvas.scale(scale, scale);
        // 用原始坐标绘制内容，变换由Canvas自动处理
        drawMyStuff(canvas);
        holder.unlockCanvasAndPost(canvas);
    }

    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        float newScale = startScale * detector.getScaleFactor();
        // 限制缩放范围
        newScale = Math.max(1.0f, Math.min(newScale, 5.0f));
        if (newScale == scale) return true;

        // 计算缩放比例变化，调整偏移量保证支点位置不变
        float scaleRatio = newScale / scale;
        translateX = detector.getFocusX() - (detector.getFocusX() - translateX) * scaleRatio;
        translateY = detector.getFocusY() - (detector.getFocusY() - translateY) * scaleRatio;

        scale = newScale;
        tryDrawing();
        return true;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        // 记录缩放开始时的当前缩放值
        startScale = scale;
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {}

    // 示例绘制方法，用原始坐标即可
    private void drawRect(Canvas canvas, Pixel pixel) {
        Paint paint = new Paint();
        paint.setColor(pixel.color);
        canvas.drawRect(pixel.x, pixel.y, pixel.x + pixel.size, pixel.y + pixel.size, paint);
        // 文本绘制同理，直接用原始坐标
    }

    // 假设你的Pixel数据类
    static class Pixel {
        float x, y;
        int color;
        int size;
    }
}

关键逻辑解释 #

1. 维护偏移量：translateX和translateY记录画布平移量，和scale配合控制画布变换，替代直接累积Canvas.scale的方式。
2. 缩放时的偏移调整：核心公式translateX = 触摸点屏幕坐标 - (触摸点屏幕坐标 - 当前偏移) * 缩放比例，保证缩放后触摸点在屏幕上的位置完全不变。
3. 绘制顺序：先平移再缩放，这样你的绘制逻辑可以完全保留原始坐标，不用因为缩放修改任何绘制代码。

这样修改后，不管切换多少次缩放支点，画布都会精准聚焦在你的手指位置，不会再出现跳转问题啦！如果还有细节需要调整，随时说~

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