HarmonyOS 不规则形状裁剪？

Question

看如果想实现一张图片上盖一个镂空的遮罩层，然后镂空的部分做相应的裁剪形成一张新图。系统现在是否支持？

Answer 1

可以参考此demo：

@Entry
@Component
struct List_Mask {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State isMask: boolean = false
  build() {
    Column(){
      Stack() {
        Image($r('app.media.background')).width(200).height(200)
        if (this.isMask) {
          Row() {
            Canvas(this.context)
              .width('100%')
              .height('100%')
              .onReady(() => {
                this.context.fillStyle = '#50000000';
                this.context.fillRect(0, 0, 200, 200);
                this.context.clearRect(50, 50, 100, 100);
              })
          }
          .height(200)
          .width(200)
        }
      }
      .width('100%')
      Button("开启/关闭遮罩").onClick(()=>{
        this.isMask = !this.isMask
      })
    }
  }
}

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-drawing-customization-on-canvas-V5\#%E4%BD%BF%E7%94%A8%E7%94%BB%E5%B8%83%E7%BB%84%E4%BB%B6%E7%BB%98%E5%88%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E5%BD%A2