从特定来源缩放画布

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

我已经使用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/的红点是相机的焦点，当你放大到足够的红点变成集中在蓝色正方形，但在现实中那不是它正在寻找在规模是默认的时候。我该如何纠正？

来源

2015-10-07 Sir

http://stackoverflow.com/questions/27339747/zoom-and-pan-in-animated-html5-canvas – markE

@markE我sinced解决了这个问题，只需要改变一行代码，你提供的链接似乎是一个非常混乱的方式来做相当简单的事情=/ – Sir

很高兴你把它分类。 :-) – markE

因为我已经改变了数学逻辑，这解决了这个问题：

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/

我希望这将帮助其他人的未来！

来源

2015-10-07 21:39:14 Sir

从特定来源缩放画布

回答

相关问题