EaselJS：将形状拉伸到特定的一侧答案

【问题标题】：EaselJS: Stretching Shape to a Specific SideEaselJS：将形状拉伸到特定的一侧
【发布时间】：2018-06-28 07:33:12
【问题描述】：

默认情况下，所有形状都从形状中心对称拉伸。是否可以将形状拉伸到特定的一侧？

【问题讨论】：

【解决方案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

我希望这是有道理的！

【讨论】：

感谢您的详尽解释！我忘了提到在我的情况下，有时形状可以旋转。旋转因子打破了标准的 x&y 逻辑，因为形状的 x 轴和画布的 x 轴不匹配。
是的，不幸的是，这涉及到更复杂的数学。您可以改为将您的内容放在一个容器中，并根据需要在容器内偏移您的内容。您还可以查看 Dan Zen 的 CreateJS 的 ZIM 框架，它提供了很多类似的功能。 zimjs.com -- 这是一段关于他的可变形容器的短视频：youtube.com/watch?v=p0zsMNVPaXU