我只是想知道 Canvas 转换是如何工作的。假设我有一个画布,在其内部某处绘制了一个圆圈,并且我想缩放该圆圈,因此它的中心点不会移动。
所以我考虑做以下事情:
translate(-circle.x, -circle.y);
scale(factor,factor);
translate(circle.x,circle.y);
// Now, Draw the circle by calling arc() and fill()
这是正确的做法吗?我只是不明白画布是否被设计为记住我所说的转换顺序。
Thanks.
是的,你是对的。
画布会累积所有变换并将它们应用到将来的任何绘图中。
因此,如果您缩放 2X,您的圆将以 2X 绘制……并且(!)此后的每次绘制都将是 2X。
这就是保存上下文的用处。
如果您想将圆缩放 2 倍,但随后的每个绘图都为正常的 1 倍,则可以使用此模式。
// 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 之后,您的平移和比例将不会应用于进一步的绘图。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)