createjs初学-关于getBounds和getTransformedBounds

在现在的easeljs中,显示对象没有width和height属性(我现在用的版本是0.8.1)。要想获得一个显示对象的宽高,可以用getBounds这个方法。

API中说明如下:
getBounds返回一个矩形,表示显示对象的边界(x,y,width,height)。如果这个显示对象被cache,那么返回的就是cache内容的边界。

不是所有的显示对象都可以计算它的bounds(比如说Shape)。这时,你可以自己用setBounds方法设置它的bounds,以方便包含它的容器计算bounds。在用setBounds方法手动设置以后,就会覆盖显示对象原来计算bounds的方式,以手动设置的为准。

对于一些显示对象来说,计算bounds效率很低,比如说Text和一个包含很多对象的容器,你可以只获取一次,然后用这个值设置显示对象的bounds。代码如下。

var bounds = obj.getBounds();
obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);

为了减小内存压力,getBounds返回的Rectangular实例可能被回收,所以要想保存这个值以后用的话,最好复制一份。

var myBounds = obj.getBounds().clone();

然后详细说下每种显示对象的getbounds的方法。

1.Container
根据所有的子对象返回的getBounds计算,合并以后就是Container的bounds。

2.Shape
返回的是null,如果cache过以后,就是cache的大小和位置。也可以通过setBounds方法先设置好。

3.Bitmap
返回的是正确的大小和位置,而且getBounds和getTransformedBounds返回的是一样的。
原图:
createjs初学-关于getBounds和getTransformedBounds_第1张图片

根据获取的bounds在上面画了一层半透明的Shape,来表示bounds的值
createjs初学-关于getBounds和getTransformedBounds_第2张图片

旋转后:
createjs初学-关于getBounds和getTransformedBounds_第3张图片

倾斜后:
createjs初学-关于getBounds和getTransformedBounds_第4张图片

4.Text
返回的也是正确的大小和位置,如图
createjs初学-关于getBounds和getTransformedBounds_第5张图片

createjs初学-关于getBounds和getTransformedBounds_第6张图片
倾斜后:

5.Sprite
Sprite获取到的是当前帧的bounds,值也是正确的。

6.BitmapText
getBounds返回的总是原始的大小和位置,在变换后getTransformedBounds返回的是正确的大小和位置。
在不变换的情况下:
createjs初学-关于getBounds和getTransformedBounds_第7张图片

在设置了位置和缩放以后:
createjs初学-关于getBounds和getTransformedBounds_第8张图片

createjs初学-关于getBounds和getTransformedBounds_第9张图片
红色的方块是getBounds方法得到的,绿色是getTransformedBounds方法得到的。
所以想要获取bitmapText的宽高,就得用getTransformedBounds这个方法。

你可能感兴趣的:(createjs)