從特定來源縮放畫布

我有一個具有縮放功能的畫布，但希望能夠在更改縮放時將相機對焦點保持在同一位置。從特定來源縮放畫布

我已經使用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

從特定來源縮放畫布

回答

相關問題