如何修复 Android 中缩放 canvas 的错误坐标

Question

我有一个自定义的 paint_view，它扩展了 image_view 并且可以与矩阵一起缩放。我将此矩阵设置为 canvas 并缩放它并按此矩阵拖动它，但在 canvas 缩放或平移后，路径或可绘制对象绘制在错误的坐标中。我试过设置坐标，但我不知道设置坐标的优化方法。
这是我的代码：

public class PaintView extends View {


private Path     drawPath;
private Paint    drawPaint;
private Paint    rect_paint;
public boolean   zoomMode    = false;
private Matrix   matrix      = new Matrix();
private Matrix   savedMatrix = new Matrix();
float            oldDist;
PointF           start       = new PointF();
PointF           mid         = new PointF();

static final int NONE        = 0;
static final int DRAG        = 1;
static final int ZOOM        = 2;
int              mode        = NONE;


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


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


public PaintView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


private void setupDrawing() {
    drawPath = new Path();
    drawPaint = new Paint();
    drawPaint.setColor(Color.BLACK);
    drawPaint.setAntiAlias(true);
    drawPaint.setStyle(Paint.Style.STROKE);
    drawPaint.setStrokeJoin(Paint.Join.ROUND);
    drawPaint.setStrokeCap(Paint.Cap.ROUND);
    drawPaint.setStrokeWidth(10);
    rect_paint = new Paint();
    rect_paint.setColor(Color.BLACK);
    rect_paint.setAntiAlias(true);
    rect_paint.setStyle(Paint.Style.STROKE);
    rect_paint.setStrokeJoin(Paint.Join.ROUND);
    rect_paint.setStrokeCap(Paint.Cap.ROUND);
    rect_paint.setStrokeWidth(20);
}


protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.setMatrix(matrix);
    canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), rect_paint);
    canvas.drawPath(drawPath, drawPaint);
}


public boolean onTouchEvent(MotionEvent event) {
    if (zoomMode) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
                start.set(event.getX(), event.getY());
                mode = DRAG;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                if (oldDist > 10f) {
                    savedMatrix.set(matrix);
                    midPoint(mid, event);
                    mode = ZOOM;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {
                    matrix.set(savedMatrix);
                    matrix.postTranslate(event.getX() - start.x,
                            event.getY() - start.y);
                }
                else if (mode == ZOOM) {
                    float newDist = spacing(event);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = newDist / oldDist;
                        matrix.postScale(scale, scale, mid.x, mid.y);
                    }
                }
                break;

        }
    } else {
        float touchX = event.getX();
        float touchY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                drawPath.moveTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_MOVE:
                drawPath.lineTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_UP:
                drawPath.lineTo(touchX, touchY);
                break;
        }
    }
    invalidate();
    return true;
}


private float spacing(MotionEvent event) {
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return FloatMath.sqrt(x * x + y * y);
}


private void midPoint(PointF point, MotionEvent event) {
    float x = event.getX(0) + event.getX(1);
    float y = event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);
}}

Answer 1

只需要将屏幕坐标转换为修改后的canvas坐标：

//如果我移动（翻译）了 canvas: TouchX = TouchX-translatedX; TouchY=TouchY - translatedY;

// 如果我有缩放 canvas: TouchX = TouchX/scaleFactor; TouchY = TouchY/scaleFactor;

//如果我翻译并移动了 canvas: TouchX= (TouchX-translatedX)/scaleFactor; TouchY = (TouchY-translatedY)/scaleFactor;

//然后我们应该用这个TouchX和TouchY画图。

如何修复 Android 中缩放 canvas 的错误坐标

how to fix the wrong coordinates of zoomed canvas in Android

android

matrix

canvas

coordinates

touch-event