畫布調整大小時的平移和縮放畫布問題

Question

我已使用在stackoverflow answer（live demo here）上找到的代碼在我的畫布上實現了平移&縮放。這很好，但我有一個問題。

我的整個頁面都是畫布，所以當瀏覽器調整大小時，畫布也會調整大小。沒有任何代碼，這隻會讓畫布看起來很可怕。如果我在瀏覽器調整大小時設置了一些jQuery來重新調整畫布大小，那麼稍後我會遇到非常奇怪的平移問題。

我不確定要更新哪些變量或如何正確更新它們以允許在畫布調整大小後平移和縮放功能繼續運行。

Answer 1

在你的情況，你需要放大後做：

canvas.width = canvas.offsetWidth 
canvas.height = canvas.offsetHeight 

此外，我從你所提到的問題做了library。它使平移和縮放功能更易於使用。

Answer 2

嘿@克里斯這個問題是有點老了，但我有同樣的問題我自己，這就是我所做的：

window.addEventListener('resize', function() { 
    var transform = context.getTransform(); 
    context.setTranslate(transform.e, transform.f); 
    context.setScale(transform.d, transform.d); 
} , false); 

在@Phrogz的功能trackTransforms（CTX），我添加了兩個附加功能：

ctx.setTranslate = function(dx, dy) { 
    translate.call(ctx, dx, dy); 
}; 
ctx.setScale = function(sx,sy) { 
    scale.call(ctx, sx, sy); 
}; 

畫布重置自身，失去所有上下文更改，漂亮的平移變焦系統。這只是試圖根據轉換重做這些更改。