Question

我完全使用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有点新意，所以请耐心等待。

Answer 1

您可以使用getBounds()代替getTransformedBounds()。它返回未转换的本地边界。然后使用这些边界在Shape中绘制一个rect，并转换Shape以匹配“object”的转换。

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

CreateJS：旋转对象后获取ACTUAL绑定区域

1 个答案: