白鹭是一款非常优秀的h5游戏引擎. 已经都有了富文本为啥不能个图文混排组件.
下面是我自己开发的图文混排组件
/**
* 图文混排组件
*/
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);
}
}
使用方式
function create(width=60,height=40):eui.Rect{
let bg = new eui.Rect()
bg.width = width
bg.height = width
bg.alpha = 0.6
return bg
}
let textData = [马克思主义是马克思,create(),主克,create(),思主义理论体系包,create(),含两个组]
let textImage = new TextImage(textData )
this.addChild(textImage)
