获取对象旋转后的实际绑定区域

CreateJS : Get the ACTUAL bound area after the object has been rotated

本文关键字:绑定 区域 取对象 旋转 获取      更新时间:2023-09-26

我正在制作一个完全使用HTML和Javascript的动画编辑器。对于画布操作操作,我使用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;
}

gettransformmedbounds()方法返回图像在转换后所占据的整个矩形区域。有没有办法获得对象在画布中实际占据的矩形面积,这样我就可以实现这样的效果:

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

而不是this:

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

我对createJS有点陌生,所以请原谅我。

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

或者,将"ui"answers"对象"放在一个容器中,并将转换应用于容器而不是"对象"。