设置了文本换行后，如何给多行文本每一行行文本设置下划线

[Create-Peace]

设置了文本换行，多行文本，如何给每一行文本设置下划线

[lijinke666]

1. 自定义多行文本所在的单元格

class CustomColCell extends ColCell {
  initCell() {
    super.initCell();

    // 绘制下划线
    const rects = this.getTextLineBoundingRects()
  }
}

2. this.getTextLineBoundingRects() 获取文本的包围盒信息
   

3. 根据文本的坐标绘制 Line 下划线, 使用 renderLine 或者 G 的 API绘制

import { renderLine } from '@antv/s2'

rects.forEach((rect) => {
  renderLine(this, {
    // 传入 x1, y1 等配置, 将图形绘制在 Canvas 中
  })
})

参考

S2/packages/s2-core/src/cell/base-cell.ts

Lines 525 to 533 in a4ae432

	this.linkFieldShape = renderLine(this, {
	x1: startX,
	y1: maxY + 1,
	// 不用 bbox 的 maxX，因为 g-base 文字宽度预估偏差较大
	x2: startX + actualTextWidth,
	y2: maxY + 1,
	stroke: linkFillColor,
	lineWidth: 1,
	});

[Create-Peace]

为什么数据出来是这样的，每个rect都是一样的，明细表使用这种数据还能计算出线如何渲染，透视没有办法计算。