Question

我使用了我在stackoverflow answer（live demo here）上找到的代码来实现pan＆amp;放大我的画布。这很好但我有一个问题。

我的整个页面都是画布，因此在调整浏览器大小时，画布也会调整大小。没有任何代码，这只会使画布拉伸看起来很可怕。如果我在浏览器调整大小时设置一些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

我也从你提到的问题中提出library。它使平移和缩放功能更容易使用。

潘＆amp;调整画布大小时缩放画布问题

2 个答案: