createjs初学-关于getBounds和getTransformedBounds

在EaselJS 0.8.1版本中,显示对象无width和height属性,可通过getBounds获取边界。若需手动设置bounds,可使用setBounds。不同类型的显示对象getBounds表现各异,如Container结合子对象计算,Shape在cache后返回大小,Bitmap与Text返回正确尺寸等。getTransformedBounds则考虑了变换效果,尤其在BitmapText中用于获取变换后的宽高。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在现在的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返回的是一样的。
原图:

根据获取的bounds在上面画了一层半透明的Shape,来表示bounds的值

旋转后:

倾斜后:

4.Text
返回的也是正确的大小和位置,如图


倾斜后:

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

6.BitmapText
getBounds返回的总是原始的大小和位置,在变换后getTransformedBounds返回的是正确的大小和位置。
在不变换的情况下:

在设置了位置和缩放以后:


红色的方块是getBounds方法得到的,绿色是getTransformedBounds方法得到的。
所以想要获取bitmapText的宽高,就得用getTransformedBounds这个方法。

### FairyGUI与CreateJS集成进行前端UI开发 #### 创建项目结构 为了实现FairyGUI与CreateJS的集成,需先设置好基础环境。确保已安装Egret Wing或其他支持CreateJS项目的IDE。 #### 导入资源包 在项目中导入FairyGUI扩展库以及所需的CreateJS库文件[^1]。这一步骤通常通过配置构建工具完成,如Webpack或Grunt。 #### 初始化舞台 创建并初始化一个基于HTML5 Canvas的舞台实例,作为所有视觉元素的基础容器: ```javascript // Initialize stage with CreateJS var canvas = document.getElementById('gameCanvas'); var stage = new createjs.Stage(canvas); createjs.Ticker.setFPS(60); // Set frame rate to 60 FPS createjs.Ticker.addEventListener("tick", handleTick); function handleTick(event) { stage.update(); } ``` #### 加载FairyGUI场景 利用FairyGUI提供的API加载打包好的界面资源,并将其渲染到舞台上: ```javascript fgui.UIPackage.addPackage("res/ui/StartScene"); // Add UI package from resources path let startView = fgui.UIObjectFactory.newObject(fgui.UIPackage.getItemByURL("ui://StartScene/startBtn")); stage.addChild(startView.displayObject); // Convert FGUI component into display object compatible with CreateJS ``` #### 添加交互逻辑 对于`startBtn`这样的节点,在其上附加事件监听器来处理用户的输入行为,比如点击效果启动新游戏流程等操作: ```javascript const buttonComponent = startView.getChild("n0").asCom; // Assuming 'n0' is the ID of your Button node within StartScene buttonComponent.onClick(addEventListener, function () { console.log("Game started!"); // Implement game initialization code here... }); ``` 以上代码片段展示了如何将FairyGUI中的按钮转换为可被CreateJS识别的对象,并为其绑定简单的点击回调函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值