Question

我有一个带缩放功能的画布，但希望能够在更改变焦时将相机对焦点保持在同一位置。

我已经使用translate来移动相机偏移的画布内容，所以我可以在比例方面包含一个原点，这有点令人困惑。

我的绘制代码如下所示：

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

    ctx.save();

    ctx.translate(0-(camera.x - el.width/2),0-(camera.y-el.height/2));          
    ctx.scale(scale,scale);

     //draw stuff here

    ctx.restore();     
}

当前平移是为了确保相机（屏幕中间）正在看正确的位置，但是一旦我缩放它，相机就不再聚焦在正确的位置。

我添加了一个JSFiddle来看它的实际效果 http://jsfiddle.net/j2r1ysan/ 红点是相机的焦点，当你放大到足够远时红点聚焦在蓝色方块上但是实际上，当规模处于违约时，这并不是它所看到的。我怎么能纠正这个？

Answer 1

我已经通过将数学逻辑改为此来解决了这个问题：

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

    ctx.save();

    ctx.translate(el.width/2,el.height/2);          
    ctx.translate(-camera.x*scale,-camera.y*scale); 
    ctx.scale(scale,scale); 
     //draw stuff here

    ctx.restore();     
}

演示： http://jsfiddle.net/5uhfg91e/

我希望将来能帮助别人！

从特定原点缩放画布

1 个答案: