HTML5 Canvas - 混合多个translate（）和scale（）调用 [英] HTML5 Canvas - Mixing multiple translate() and scale() calls

问题描述

我只是想知道Canvas转换是如何工作的。假设我有一个画布，其中有一个圆圈，我想要缩放圆圈，所以它的中心点不会移动。
所以我考虑做以下事情：

I just wonder how do the Canvas transformations work. Lets say i have a canvas with a circle drawn somewhere inside of it, and i want to scale the circle, so its center point will not move. So i thought about doing the following:

translate(-circle.x, -circle.y);
scale(factor,factor);
translate(circle.x,circle.y);

// Now, Draw the circle by calling arc() and fill()

这是正确的方法吗？我只是不明白画布是否设计为记住我调用转换的顺序。

Is it the right way to do it? I just don't understand whether the canvas was designed to remember the order that i call the transformations.

谢谢。

推荐答案

是的，你是对的。

画布累积所有变换并将其应用于任何未来的绘图。

因此，如果你缩放2X，你的圆圈将被绘制为2X ......并且（！）之后的每次抽奖都将是2X。

So if you scale 2X, your circle will be drawn at 2X…and(!) every draw after that will be 2X.

这就是保存上下文有用的地方。

That’s where saving the context is useful.

如果你想将你的圆圈缩放2倍，然后让每个后续绘图都达到正常的1倍，你可以使用这个模式。

If you want to scale your circle by 2X but then have every subsequent drawing be at normal 1X you can use this pattern.

// save the current 1X context
Context.save();

// move (translate) to where you want your circle’s center to be
Context.translate(50,50)

// scale the context
Context.scale(2,2);

// draw your circle
// note: since we’re already translated to your circles center, we draw at [0,0].
Context.arc(0,0,25,0,Math.PI*2,false);

// restore the context to it’s beginning state:  1X and not-translated
Context.restore();

在Context.restore之后，您的翻译和比例将不适用于其他图纸。

After Context.restore, your translate and scale will not apply to further drawings.

这篇关于HTML5 Canvas - 混合多个translate（）和scale（）调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！