egret图文混排

class TextImage extends eui.Group {
       public templet: egret.TextField
       constructor(protected _TextImageData: Array<any> = []) {
           super();
           this.init()
       }
       set TextImageData(val: Array<any>) { this._TextImageData = val; this.init(); }
       get TextImageData() { return this._TextImageData }
       _size = 36
       /**设置文字字体大小 */
       set size(val: number) {
           this._size = val
       }
       get size(): number {
           return this._size
       }
       private _width: number;
       /**设置宽度 */
       set width(val) { this._width = val; this.invalidate(); }
       get width() { return this._width };
       private _verticalAlign = egret.VerticalAlign.MIDDLE;
       /**设置vercatical */
       set verticalAlign(val) { this._verticalAlign = val; this.invalidate(); }
       get verticalAlign() { return this._verticalAlign };
       _maxWidth: number
       /**设置组件的最大宽度 */
       set maxWidth(val: number) {
           this._maxWidth = val
           if (this.templet.width > val) {
               this.width = val
               this.invalidate()
           }
       }
       get maxWidth(): number {
           return this._maxWidth
       }
       private _lineSpacing = 0
       /**设置组件的行间距 */
       set lineSpacing(val: number) {
           if (this._lineSpacing === val) return
           this._lineSpacing = val
           this.invalidate()
       }
       get lineSpacing(): number {
           return this._lineSpacing
       }
       /**立即计算布局 */
       validateNow() {
           this.init()
           this.invalidate_Flag = false
       }
       /**组件的每行高度 */
       lineHeightArray: Array<number> = []
       components: any[] = []
       protected init() {
           this.removeChildren()
           if (this._TextImageData.length == 0) {
               this.width = this.height = 0
               return
           }
           // 保存组件,清除事件绑定
           this.components = []
           this._TextImageData.forEach(component => {
               if (typeof component == 'object') {
                   this.components.push(component)
                   if (!component['watch']) {
                       egret.is(component, 'eui.Image') && component.once(egret.Event.COMPLETE, this.invalidate, this)
                       eui.Watcher.watch(component, ['width'], this.invalidate, this)
                       eui.Watcher.watch(component, ['height'], this.invalidate, this)
                       component['watch'] = true
                   }
               }
           })
           let textFlow = this._TextImageData.map(text =>
               typeof text === "string" || egret.is(text, 'eui.Label')
                   ? { text: egret.is(text, 'eui.Label') ? text.text : text }
                   : { text: '樂', style: { size: text.width } }
           )
           let TextField: egret.TextField = this.templet = new egret.TextField();
           TextField.size = this.size;
           TextField.lineSpacing = 0;
           TextField.width = this.width
           TextField.textFlow = textFlow
           TextField.height = TextField.height
           this.height = 0
           this.lineHeightArray = []
           let componentTestIndex = 0 //测量高度的组件序号
           let componentIndex = 0 //布局的组件序号
           TextField['linesArr'].forEach((item,lines) => {
               console.log('item=>', item)
               //获取最大高度
               let maxheight = this.size
               //组件序号
               item.elements.forEach((element) => {
                   if (element.text == '樂') {
                       let c = this.components[componentTestIndex++]
                       maxheight = Math.max(maxheight, c.height)
                   }
               })
               maxheight = this._lineSpacing + maxheight
               this.lineHeightArray.push(maxheight)
               //开始布局
               let x = 0
               item.elements.forEach(element => {
                   let component
                   if (element.text !== '樂') {
                       component = new egret.TextField()
                       component.x = x
                       component.size = this.size
                       component.text = element.text
                       component.width = element.width
                       component.textColor = this._textColor
                       component.height = maxheight
                       component.y = this.height
                       component.verticalAlign = this._verticalAlign;
                   } else {
                       component = this.components[componentIndex++]
                       component.x = x
                       component.y = this.height + (maxheight - component.height) / 2
                   }
                   x += component.width
                   this.addChild(component)
               })
               this.height += maxheight
           })
           this._width = this.templet.width
       }
       _textColor: number = 0x000000
       set textColor(val) {
           this._textColor = val
           this.invalidate()
       }
       get textColor() {
           return this._textColor
       }
       /**失效验证 */
       private invalidate_Flag: boolean = false
       private invalidate(e?: egret.Event): void {
           if (this.invalidate_Flag) {
               return
           }
           this.invalidate_Flag = true
           this.once(egret.Event.ENTER_FRAME, () => {
               this.init()
               this.invalidate_Flag = false
           }, this);
       }
   }

  

posted @ 2024-10-23 13:49  游戏鼻祖  阅读(2)  评论(0编辑  收藏  举报