调整画布大小时的平移和缩放画布问题答案

【问题标题】：Pan & Zoom canvas issue when canvas is resized调整画布大小时的平移和缩放画布问题
【发布时间】：2013-01-14 15:04:46
【问题描述】：

我已使用在此 stackoverflow answer (live demo here) 上找到的代码在我的画布上实现平移和缩放。这很好用，但我有一个问题。

我的整个页面都是画布，所以当浏览器调整大小时，画布也会调整大小。没有任何代码，这只会使画布拉伸，看起来很糟糕。如果我在调整浏览器大小时设置了一些 jQuery 来调整画布大小，那么稍后我会遇到非常奇怪的平移问题。

我不确定要更新哪些变量或如何正确更新它们以允许在调整画布大小后平移和缩放继续运行。

【问题讨论】：

你试过了吗？
我尝试更改了一些变量，但没有奏效，甚至没有让我知道我做错了什么

标签： javascript html canvas zooming pan

【解决方案1】：

嘿@Chris 这个问题有点老了，但我自己也有同样的问题，这就是我所做的：

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 );
};

Canvas 会自行重置，丢失所有上下文更改，这是一个不错的平移缩放系统。这只是试图根据转换重做这些更改。

【讨论】：

感谢您的回答，我暂时没有时间尝试，但看起来确实不错！有空我会回来的:)

【解决方案2】：

在您的情况下，您需要在缩放后执行：

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

我还根据您提到的问题提出了library。它使平移和缩放功能更易于使用。

【讨论】：