car/assets/script/ui/home/home_guangbo.ts

import { _decorator, CacheMode, Color, Component, Label, Node, RichText, Size, Tween, tween, UITransform, Vec3, view } from 'cc';
import { guangboData } from '../../data';
const { ccclass, property } = _decorator;

@ccclass('home_guangbo')
export class home_guangbo extends Component {
    @property(Node) lab_content:Node = null
    private cur_index = 0
    private data_list:guangboData[] = []
    private screen_width:number = 1080
    private speed:number = 5
    private left_padding:number = 30

    init(data_list:guangboData[]) {
        this.data_list = data_list
        // console.log(this.data_list)
        if(this.data_list.length==0) {
            this.setLabContent('')
            this.unscheduleAllCallbacks()
            return
        }
        this.cur_index = 0
        // this.getContentLabelText()
        this.getContentRichText()
    }

    private getContentRichText() {
        if(this.cur_index>=this.data_list.length) {
            this.cur_index = 0
        }
        let cur_content = this.data_list[this.cur_index].title
        cur_content = '<b>' + cur_content + '</b>' // 加粗
        this.setLabContent(cur_content)
        let cur_content_width = this.lab_content.getComponent(UITransform).contentSize.width
        // console.log('cur_content_width=',cur_content_width)
        this.lab_content.setPosition(this.screen_width/2+this.left_padding,this.lab_content.getPosition().y,0)
        this.runContent(cur_content_width)
    }

    private getContentLabelText() {
        if(this.cur_index>=this.data_list.length) {
            this.cur_index = 0
        }
        let cur_content = this.data_list[this.cur_index].title
        this.setLabContent(cur_content)
        let lab_component = this.lab_content.getComponent(Label)
        let cur_content_width = this.computeLabelTextWidth(cur_content,lab_component.fontSize,lab_component.lineHeight)
        // console.log('cur_content_width=',cur_content_width)
        let cur_content_height = this.lab_content.getComponent(UITransform).contentSize.height
        this.lab_content.getComponent(UITransform).setContentSize(new Size(cur_content_width,cur_content_height))
        this.lab_content.setPosition(this.screen_width/2+this.left_padding,this.lab_content.getPosition().y,0)
        this.runContent(cur_content_width)
    }

    private runContent(content_width:number) {
        this.unscheduleAllCallbacks()
        let run_pos_x = this.lab_content.getPosition().x
        this.schedule(()=>{
            run_pos_x -= this.speed
            // console.log('cur_lab_content_postion_x=',cur_lab_content_postion_x)
            this.lab_content.setPosition(run_pos_x,this.lab_content.getPosition().y,0)
            if(run_pos_x<=-(content_width+this.screen_width/2)) {
                run_pos_x = this.screen_width/2+this.left_padding
                this.unscheduleAllCallbacks()
                this.cur_index++
                // this.getContentLabelText()
                this.getContentRichText()
            }
        },0.08)
    }

    private setLabContent(text:string) {
        // this.lab_content.getComponent(Label).string = text
        this.lab_content.getComponent(RichText).string = text
    }

    /** 
     * @param text 要显示文本内容
     * @param designSize label的设计宽高
     * @param fontSize 字体大小
     * @param lineHeight 行高
     */
    private computeLabelTextWidth(text: string, fontSize: number, lineHeight: number):number {
        // 计算Label宽度
        let node = new Node();
        var newlabel :Label = node.addComponent(Label);        
        newlabel.fontSize = fontSize;
        newlabel.lineHeight = lineHeight;
        newlabel.string = text;
        newlabel.color = new Color(0, 0, 0, 0);
        //计算宽度
        newlabel.overflow = Label.Overflow.NONE; //设置不换行和不等比压缩，文字原来有多长就多长
        newlabel.cacheMode = CacheMode.CHAR; //这里要设一下CacheMode.CHAR, 否则Label最大长度只有2048，不能再大了.
        
        newlabel.updateRenderData(true);
        let textWidth = newlabel.getComponent(UITransform).contentSize.width;
        node.destroy();

        return textWidth;
    }

}