CreateJS : 获取对象旋转后的实际绑定区域答案

【问题标题】：CreateJS : Get the ACTUAL bound area after the object has been rotatedCreateJS : 获取对象旋转后的实际绑定区域
【发布时间】：2015-12-01 19:30:12
【问题描述】：

我正在制作一个完全使用 HTML 和 Javascript 的动画编辑器。对于 Canvas 操作操作，我使用的是 CreateJS。

此时，我想在画布内渲染一个小 UI，显示选择的项目。

当我旋转图像时问题就开始了，到目前为止我知道我可以在转换后获得位图的边界，但是这个操作给了我我不想要的数据。

以下代码设置画布中绘制的 UI 的坐标：

update : function(){

    //Big rectangle 
    this.ui[0].x = this.object.x;
    this.ui[0].y = this.object.y;
    this.ui[0].rotation = this.object.rotation;
    this.ui[0].scaleX = this.object.scaleX;
    this.ui[0].scaleY = this.object.scaleY;

    //North West rectangle coordinates
    this.ui[1].x = this.object.getTransformedBounds().x;
    this.ui[1].y = this.object.getTransformedBounds().y;

    //North East rectangle coordinates
    this.ui[2].x = this.object.getTransformedBounds().x + this.object.getTransformedBounds().width;
    this.ui[2].y = this.object.getTransformedBounds().y;

    //South West rectangle coordinates
    this.ui[3].x = this.object.getTransformedBounds().x;
    this.ui[3].y = this.object.getTransformedBounds().y + this.object.getTransformedBounds().height;

    //South East rectangle coordinates
    this.ui[4].x = this.object.getTransformedBounds().x + this.object.getTransformedBounds().width;
    this.ui[4].y = this.object.getTransformedBounds().y + this.object.getTransformedBounds().height;
}

getTransformedBounds() 方法返回图像变换后占据的整个矩形区域。有没有办法获得对象在画布中占据的实际矩形区域，这样我就可以实现这样的目标：

http://postimg.org/image/5wr32wt7j/

不是这个：

http://postimg.org/image/dqroob10f/

我对 createJS 有点陌生，所以请多多包涵。

【问题讨论】：

顺便说一句，您应该尽量避免重复调用方法以获得相同的值。调用一次并保存结果要快得多，并且可以节省大量输入。 var bounds = this.object.getTransformedBounds() 然后this.ui[4].x = bounds.x + bounds.width;
是的，你是对的。我仍然无法摆脱这种奇怪的习惯。 ://

标签： javascript html web createjs 2d-games

【解决方案1】：

您可以使用getBounds() 代替getTransformedBounds()。它返回未转换的局部边界。然后只需使用这些边界在 Shape 中绘制一个矩形，并变换 Shape 以匹配“对象”的变换。

或者，将“ui”和“object”放在一个 Container 中，并将转换应用于 Container 而不是“object”。

【讨论】：