EaselJS:将形状拉伸到特定侧面

时间:2018-06-28 07:33:12

标签: javascript canvas transform easeljs

默认情况下,所有形状均从形状中心对称地拉伸。可以将形状拉伸到特定侧面吗?

enter image description here

1 个答案:

答案 0 :(得分:1)

事物从其起点开始“伸展”。如果您从中心开始绘制,然后缩放,那么它将看起来从中心开始缩放。

从中心绘制矩形

var r1 = new createjs.Shape();
r1.graphics.beginStroke("red").drawRect(-100,-100,200,200);

从左侧绘制矩形

var r2 = new createjs.Shape();
r2.graphics.beginStroke("red").drawRect(0,0,200,200);

这是一个小提琴 https://jsfiddle.net/owx26481/

或者,您可以更改注册点,该注册点基本上会偏移对象的绘制位置,并且具有相同的效果:

var r1 = new createjs.Shape();
r1.graphics.beginStroke("red").drawRect(0,0,200,200);

var r2 = new createjs.Shape();
r2.graphics.beginStroke("red").drawRect(0,0,200,200); // SAME

r2.regX = r2.regY = 100; // Change registration point to the center (50%)

这是更新的小提琴:https://jsfiddle.net/owx26481/2

我希望这是有道理的!