基于measure实现的文本测量

collapseText(): void { 
  //判断文本是否需要展开 
  if (!this.needProcess) { 
    return; 
  } 
  let titleSize : SizeOptions = measure.measureTextSize({ 
    textContent: this.rawTitle, 
    constraintWidth: this.titleWidth, 
    fontSize: 20 
  }) 
  //测量最大行数（两行）限制的高度， 
  let twoLineSize : SizeOptions = measure.measureTextSize({ 
    textContent: this.rawTitle, 
    constraintWidth: this.titleWidth, 
    fontSize: 20, 
    maxLines: this.MAX_LINES 
  }) 
  //文本未超过限制行数，不进行展开、收起处理 
  if (Number(titleSize.height) == Number(twoLineSize.height)) { 
    this.needProcess = false; 
    return; 
  } 
 
  console.log('test row height:' + titleSize.height) 
  console.log('test twoLineSize height:' + twoLineSize.height) 
  //clipTitle被截取的文本，rawtitle只全部的文本 
  let clipTitle: string = this.rawTitle 
  //EXPAND_STR将展开这个文本赋值给最后一个span 
  this.lastSpan = this.EXPAND_STR; 
  while (Number(titleSize.height) > Number(twoLineSize.height)) { 
    //判断是否展开 
    this.expanded = true; 
    clipTitle = clipTitle.substring(0, clipTitle.length - 1); 
    titleSize = measure.measureTextSize({ 
      //文本总共被分成三段，展示的则是被截取的文本+省略号+最后的展开或收起的文字 
      textContent: clipTitle + this.ellipsis + this.lastSpan, 
      constraintWidth: this.titleWidth, 
      fontSize: 20 
    }) 
    console.log("test while clipTitle:" + clipTitle) 
    console.log("test while clipTitle height:" + titleSize.height) 
  } 
  console.log("test clipTitle:" + clipTitle) 
  this.title = clipTitle + this.ellipsis 
  this.expanded = false; 
}
// 文本展开态（即收起逻辑） 
expandText(): void { 
  console.log('testTag: ' + this.needProcess); 
  if (this.needProcess) { 
  //文本已经展开了，就需要将最后一个文本替换成收起的样式 
  this.lastSpan = this.COLLAPSE_STR; 
  this.expanded = true; 
  this.title = this.rawTitle; 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

//子组件的最大宽度，目前是定死的 
const childMaxWidth:number = 325 //为了方便后续计算，这里的宽度数值为px 
let displayClass: display.Display | null = null; 
let componentWidth:number = 0; 
try { 
  //获取屏幕宽度 
  displayClass = display.getDefaultDisplaySync(); 
  componentWidth = displayClass.width 
  console.log('---这是componentWidth',componentWidth) 
} catch (exception) { 
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception)); 
} 

// 监听下标和单个文字的改变 
IndexChange(){ 
  if(this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)){ 
    this.newIndex = this.index 
    console.log('---这是newIndex',this.newIndex) 
  } 
} 
 
textChange(){ 
  let content:string = this.message 
  this.textWidth = measure.measureText({ 
    textContent: content, 
    fontSize: this.fontSizeData 
  }) 
  if(this.textWidth > childMaxWidth){ 
    this.AllWidth += childMaxWidth 
    console.log('---这是AllWidth1',this.AllWidth) 
 
  }else{ 
    this.AllWidth += this.textWidth 
    console.log('---这是AllWidth2',this.AllWidth) 
    console.log('---textWidth',this.textWidth) 
  } 
}
// 对超出的文本进行判断 
aboutToAppear(): void { 
  // this.process(); 
  if(componentWidth != 0){ 
    this.restrictWidth =  Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 0.01 ) 
    console.log('---这是restrictWidth',this.restrictWidth) 
    console.log('---FlexWidth',(this.FlexWidth)) 
  } 
  for(let i = 0;i < this.AllData.length;i++){ 
    this.message = this.AllData[i] 
    this.index = i 
    console.log('---index',this.index) 
  } 
  this.SomeData = this.AllData.slice(0,this.newIndex+1) 
  this.ShowData = this.SomeData 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.