Question

我有许多对象代表我想要在画布上绘制的图像。每个对象都有一个X，Y，Scale属性以及一个传递canvas对象的render方法。然后canvas标签被传递给每个对象的render方法，它们都需要将自己呈现给画布。

我遇到的问题是缩放是从画布的原点而不是图像的原点进行的。为了解决这个问题，我尝试了以下方法：

canvas.translate(-this.X, -this.Y);
canvas.scale(this.Scale, this.Scale);
canvas.translate(this.X, this.Y);

上面代码的问题在于，看起来你只能进行1次翻译，而第3行应该将对象移回原来的位置，这在调用drawImage时会成为翻译。如果我删除第3行，我会得到正确的缩放原点，但图像移动到0,0并且不会在正确的位置渲染。

进行此类缩放的正确方法是什么？

Answer 1

尝试：

canvas.translate(this.X, this.Y);
canvas.scale(this.Scale, this.Scale);
canvas.translate(-this.X, -this.Y);

但请记住，这样做你需要做很多ctxt.save();和ctxt.restore(); s如果你得到图像的宽度和高度，你可以简单地做ctxt.drawImage(this.image, this.X, this.Y, this.Width*this.Scale, this.Height*this.Scale);你不需要搞乱上下文状态堆栈，它可能会更快。

编辑：

转换不会影响原点。发生的事情是它们必须在reverse order中应用。请记住，此方法只是在转换堆栈中堆叠矩阵的快捷方式。

在HTML5画布中缩放图像

1 个答案: