HarmonyOS 自定义组件如何绘制一个三角

可以根据文字内容长度来计算canvas的宽度，参考示例：

// xxx.ets
@Entry
@Component
struct Clip {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  @State fillText: string = 'Canvas Clip'
  //获取文本长度*字体大小 +20是预留三角形位置，可根据效果自定义
  @State canvasWidth: number = this.fillText.length * px2vp(80) + 20

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .height(50)
        .width(this.canvasWidth)
        .backgroundColor(Color.Red)
        .onReady(() => {
          let offContext = this.offCanvas.getContext("2d", this.settings)
          let region = new Path2D()
          region.moveTo(this.canvasWidth - 20, 25) //三角形顶点位置
          region.lineTo(this.canvasWidth, 0) //三角形上底角位置
          region.lineTo(this.canvasWidth, 50) //三角形下底角位置
          region.closePath()
          offContext.clip(region, "evenodd")
          offContext.fillStyle = Color.White
          offContext.fillRect(0, 0, 200, 200)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
          this.context.font = '80px sans-serif bolder'
          this.context.fillStyle = Color.White
          this.context.fillText(this.fillText, 0, 35)
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}
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.