JS中canvas画布绘制中如何实现缩放，位移，旋转

Posted 2023-03-22

参考技术A cxt.scale(2,2);
缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
x： 添加到水平坐标（x）上的值
y： 添加到垂直坐标（y）上的值
发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。

context.rotate(angle); 方法旋转当前的绘图
注意参数是弧度（PI）
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

画布可绘制对象和居中缩放

【中文标题】画布可绘制对象和居中缩放

【英文标题】：Canvas drawables and centered zooming

【发布时间】：2012-02-01 17:59:00

【问题描述】：

我正在使用Google tutorial 为我的画布实现缩放功能。我在画布上绘制了几个项目，我可以通过Canvas.translate(dx,dy) 将其与项目一起移动。为了让我确定这些项目是否在画布平移后被触摸，我将用于Canvas.translate(dx,dy) 的画布偏移量减去触摸位置。一旦我在图片中引入缩放，它就会变得有点棘手。如果我使用Canvas.scale(sx,sy) 并执行(touchX-offsetX)/scaleFactor，则缩放后触摸位置的平移完美。但是，如果包含枢轴位置Canvas.scale(sx,sy,px,py)，则上面的代码不起作用。作为触摸翻译的一部分，我如何着手考虑枢轴位置？我通过执行以下操作来设置我的枢轴位置，

    public boolean onScaleBegin(ScaleGestureDetector detector) 
    mScaleX = detector.getFocusX();
    mScaleY = detector.getFocusY();
    return true;

任何帮助将不胜感激。

【参考方案1】：

简单的解决方案

 public class ScalableImageView extends View 
    Matrix drawMatrix = new Matrix();
    ScaleGestureDetector detector;
    public ScalableImageView(Context context, AttributeSet attrs)  
         @Override
        public boolean onScale(ScaleGestureDetector detector) 

            drawMatrix.postScale(detector.getScaleFactor(), detector.getScaleFactor(), detector.getFocusX(), detector.getFocusY());
            invalidate();
            return true;
        

        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) 
            return drawMatrix != null;
        

        @Override
        public void onScaleEnd(ScaleGestureDetector detector) 

        
    

    @Override
    protected void onDraw(Canvas canvas) 
        super.onDraw(canvas);

        canvas.save();
        canvas.concat(drawMatrix);
        // ... draw here
        // for example drawable.draw()
        canvas.restore();