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屋！