Question

我有一个画布，我可以使用转换函数以一定角度绘制圆圈。

但我也使用比例和平移进行相机变焦和位置。问题是转换功能导致缩放基于它的左上角，我无法弄清楚如何解决这个问题。

这是我的代码：

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/

从中心点使用变换和缩放

1 个答案: