arkts-canvas相关

api 12 及以上，不定期更新

canvas 实际大小：

无论需要绘制什么，大小总是需要先测量，多数时候大小都是 100% 而不是具体数值。使用 onAreaChange 来测量大小。示例：代码1

canvas 使用了 @State 等变量监听，变量改变没有触发重绘：

将绘制内容提取为方法，使用 @Watch 监听改变，变化时调用绘制方法，示例：代码1

// 代码 1
@State bgWidth: number = 0
@State bgHeight: number = 0
@State @Watch("contentChange") content: number = 0

//监听变量改变，重绘
contentChange(){
    this.onDraw()  //重绘
}

build() {
  Column() {
    //...
    //...
    
    Canvas(this.context)
      .backgroundColor($r("app.color.fill3"))
      .onReady(() => {
        this.onDraw()
      })
      .onAreaChange((oV, nV) => {
        this.bgWidth = nV.width as number
        this.bgHeight = nV.height as number
        this.onDraw()  //重绘
      })
      .width("100%")
      .height("100%")
      
      //...
      //...
  }
  .width("100%")
  .height("100%")
}

// 绘制
onDraw() {
   //...
   //...
}

canvas 的 context

官方示例中canvas 需要设置context

private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

实际上每个canvas 都需要独立的context 才行，如在 List 等组件 中使用，需要单独写一个 @Component 来使用，否则context 就会在最后一个设置了context的 canvas 的画布中生效

@Entry
@Component
struct main(){
    build(){
        Column(){
            ForEach(){
                MCanvas()
                    ...
                    ...
            }
        }...
    }
}
@Component
struct MCanvas(){

    private settings: RenderingContextSettings = new RenderingContextSettings(true);
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

    build(){
        Column(){
            Canvas(this.context)
                ...
                ...
        }...
    }
}

有时没有内容不需要绘制时，为了防止之前绘制挡住了内容，则需要重置画布，重置画布代码如下：

//重置画布
this.context.beginPath()
this.context.clearRect(0, 0, this.bgWidth, this.bgHeight)
this.context.stroke()

画布圆角

目前没有发现圆角的设置方式，且直接在canvas 上设置圆角也无效，只能在外部的容器上添加圆角且clip 为true 才有效果（并非一定是这样），

.borderRadius(6)
.clip(true)