Laya学习笔记-02滚动文本

 

一、场景搭建

1.在Laya->工程->Scenes->新建->页面/场景 新建一个场景命名为“Main”

2.设置新建的场景属性

3.创建一个Text类型的UI组件

4.在右边Text的属性栏中设置Text的宽高及位置

5.设置Text的文本内容、字体大小、字体颜色、自动换行、垂直间距、文本超出文本域行为

二、代码实现

1.新建一个代码命名为“TextCtrl.js”,代码内容如下

export default class TextCtrl extends Laya.Script {

    constructor() {
        super();
        /** @prop {name:txt, tips:"提示文本", type:Node, default:null}*/
        this.txt=null;
    }

    onAwake() {

        this.txt.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
        this.mouX=0;
        this.mouY=0;
    }

    onMouseDown(){

        this.mouX=this.txt.mouseX;
        this.mouY=this.txt.mouseY;
        Laya.stage.on(Laya.Event.MOUSE_MOVE,this,this.scrollText);
        Laya.stage.on(Laya.Event.MOUSE_UP,this,this.finishScrollText);
    }

    scrollText(){

        var nowX=this.txt.mouseX;
        var nowY=this.txt.mouseY;
        this.txt.scrollX+=this.mouX-nowX;
        this.txt.scrollY+=this.mouY-nowY;
        this.mouX=nowX;
        this.mouY=nowY;
    }

    finishScrollText(){

        Laya.stage.off(Laya.Event.MOUSE_MOVE,this,this.scrollText);
        Laya.stage.off(Laya.Event.MOUSE_UP,this,this.finishScrollText);
    }

}

2. 将“TextCtrl.js”代码挂载在Scene中

3.在“TextCtrl.js”，txt属性中指定为我们上创建的 Text UI组件，大功告成！

参考资料：https://ldc2.layabox.com/doc/?nav=zh-ts-1-2-3