从中心点使用变换和缩放

Question

我有一个 canvas，我使用变换函数以一定角度绘制圆圈。

但我也使用缩放和平移来进行相机缩放和定位。问题是变换函数导致缩放基于它的左上角，我不知道如何解决这个问题。

这是我的代码：

function draw(){
    ctx.clearRect(0,0,element.width,element.height);        
    ctx.save();      

    ctx.setTransform(scale, 0.01, 0.01, 0.3*scale, scale, element.height/2*0.7);      
    ctx.translate(0-(camera.x - element.width/2),0-(camera.y-element.height/2));      

    for(var i = 0; i < obj.length; i++){
        ctx.beginPath();
        ctx.arc(0,0,obj[i].radius,0,Math.PI*2);  
        ctx.lineWidth = 4.5;
        ctx.strokeStyle = "white";
        ctx.stroke();
    }
    ctx.restore();
    requestAnimationFrame(draw);
}

如果你放大和缩小，你会看到问题是它没有停留在正确的位置，相机在漂移，我需要纠正这个问题：http://jsfiddle.net/ub97gdgj/

我该如何解决这个锚点问题？

Answer 1

在使用变换功能之前，可以移动整个图像，使旋转点位于图像的中心。

ctx.setTransform(scale, 0.01, 0.01, 0.3*scale, element.width/2, element.height/2);

ctx.setTransform 的第 5 和第 6 个参数用于翻译功能。

http://jsfiddle.net/ub97gdgj/2/

从中心点使用变换和缩放

Using transform and scaling from center point

javascript

math

transformation