javascript - 调整画布大小时的平移和缩放画布问题

Question

我已使用在此stackoverflow 答案（此处为现场演示）上找到的代码在我的画布上实现平移和缩放。这很好用，但我有一个问题。

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

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

Answer 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 会自行重置，丢失所有上下文更改，这是一个不错的平移缩放系统。这只是试图根据转换重做这些更改。

Answer 2

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

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

我还根据您提到的问题制作了一个库。它使平移和缩放功能更易于使用。