HarmonyOS 如何绘制一条虚线

可以使用Canvas画布实现，参考示例如下：

@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  /* * text: 绘制的文本内容 * x: 开始位置的x坐标 * y: 开始位置的y坐标 * maxWidth: 最大换行宽度 * lineHeight: 行高 */
  wrapText(text: string, x: number, y: number, maxWidth?: number, lineHeight?: number) {
    if (typeof maxWidth == 'undefined') {
      maxWidth = 300;
    }
    if (typeof lineHeight == 'undefined') {
      lineHeight = 20
    }
    this.context.beginPath();
    this.context.moveTo(x, y + 10);
    this.context.lineTo(maxWidth, y + 10);
    this.context.stroke();
    this.context.closePath();
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context).width('100%').height('100%').onReady(() => {
        //设置线条粗细
        this.context.lineWidth = 1
        // 设置线条宽度
        this.context.strokeStyle = "black"
        // 设置线条颜色
        this.context.setLineDash([25, 10])
        // 设置虚线间隔
        this.wrapText("", 0, 40, this.context.width, 30)
      })
    }
    .width('100%').height('100%')
  }
}
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.