LayaAir Sprite 容器添加子节点

目录

Sprite 

容器操作

---

Sprite 

Package	laya.display
类	public class Sprite
Inheritance	Sprite Node EventDispatcher Object
子类	AnimationBase, PerfHUD, Scene, Stage, Text

1、Sprite 是基本的显示图形的显示列表节点， Sprite 默认没有宽高，默认不接受鼠标事件。

2、通过 graphics 可以绘制图片或者矢量图，支持旋转，缩放，位移等操作。

3、laya.display.Sprite 同时也是容器类，可用来添加多个子节点。

容器操作

/**
 * 添加子节点。此方法继承在父类 laya.display.Node
 * @param   node 节点对象
 * @return  返回添加的节点
 */
addChild(node: Node): Node;

实现上图的方案之一是创建一个 Sprite 作为容器，然后将4个小猫作为其子节点(Sprite)，最后设置好子节点位置，进行定时调用改变父容器 Sprite 角度即可。实现代码如下：

/**ES6类 */
class Tomcat_Container {
    /**类的构造器函数 */
    constructor() {
        const Browser = Laya.Browser;//浏览器对象路径，方便后续创建对象
        const Stage = Laya.Stage;//舞台对象路径，方便后续创建对象

        /**初始化舞台，不支持WebGL时自动切换至Canvas
         * 设备像素分辨率：clientWidth、clientHeight
         */
        Laya.init(Browser.clientWidth, Browser.clientHeight, Laya.WebGL);

        /**设置舞台水平对齐模式居中，垂直对齐模式为居中
         * SCALE_SHOWALL:应用显示全部内容，按照最小比率缩放，等比缩放不变形，一边可能会留空白，stage的宽高等于设计宽高
         */
        Laya.stage.alignV = Stage.ALIGN_MIDDLE;
        Laya.stage.alignH = Stage.ALIGN_CENTER;
        Laya.stage.scaleMode = Stage.SCALE_SHOWALL;

        this.showTomcat();
    }

    /**显示 Tomcat 猫容器 */
    showTomcat() {
        const Sprite = Laya.Sprite;//精灵对象路径，方便后续创建对象
        const layoutRadius = 150;
        var radianUnit = Math.PI / 2;

        // tomcats：这个精灵将当做一个容器使用，用于装载子精灵(4 张图片)
        //this.tomcats表示创建的是类的全局属性，可以在本来的任意方法中调用
        this.tomcats = new Sprite();
        Laya.stage.addChild(this.tomcats);

        // tom：4 张子图片(精灵)，将添加到精灵 tomcats 父容器中
        let tom;
        for (let i = 0; i < 4; i++) {
            tom = new Sprite();
            this.tomcats.addChild(tom);/**添加子节点 */
            tom.loadImage('http://tomcat.apache.org/res/images/tomcat.png');/**加载并显示一个图片*/
            /**pivot：设置轴心点，返回对象本身；pos：设置坐标位置 */
            tom.pivot(55, 72).pos(Math.cos(radianUnit * i) * layoutRadius, Math.sin(radianUnit * i) * layoutRadius);
        }
        /**设置容器 tomcats 的显示的位置*/
        this.tomcats.pos(Laya.stage.width / 2, Laya.stage.height / 2);

        /**定时重复执行(基于帧率)。
         * frameLoop(delay: number, caller: any, method: Function, args?: Array<any>, coverBefore?: boolean)
         * delay	间隔几帧(单位为帧)；caller	执行域(this)；method	定时器回调函数。
         * args	回调参数； coverBefore	是否覆盖之前的延迟执行，默认为 true 。
         */
        Laya.timer.frameLoop(1, this, this.animate);
    }

    /**帧动画回调函数 */
    animate() {
        /**rotation：旋转角度，默认值为0。以角度为单位。决定了图像运行的快慢*/
        this.tomcats.rotation += 0.5;
    }
}

/**运行本类 */
new Tomcat_Container();