LayaAir Sprite 容器添加子节点

我会带着你远行 2022-04-10 12:39 252阅读 0赞

**目录**

Sprite

容器操作

--------------------

# Sprite  #

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.display</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class Sprite</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>Sprite <img alt="Inheritance" src="https://layaair.ldc.layabox.com/api2/Chinese/images/inherit-arrow.gif">Node <img alt="Inheritance" src="https://layaair.ldc.layabox.com/api2/Chinese/images/inherit-arrow.gif">EventDispatcher <img alt="Inheritance" src="https://layaair.ldc.layabox.com/api2/Chinese/images/inherit-arrow.gif"> Object</td> 
  </tr> 
  <tr> 
   <td><strong>子类</strong></td> 
   <td>AnimationBase, PerfHUD, Scene, Stage, Text</td> 
  </tr> 
 </tbody> 
</table>

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

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

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

# 容器操作 #

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

![20190107113100682.gif][]

实现上图的方案之一是创建一个 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();

[laya.display.Sprite]: https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&class=laya.display.Sprite
[laya.display.Node]: https://layaair.ldc.layabox.com/api2/Chinese/index.html?category=Core&class=laya.display.Node#addChild%28%29
[20190107113100682.gif]: /images/20220330/0274a3454e8b48e7b934ccb604939c3e.png