鸿蒙开发中如何实现镂空效果？

Question

鸿蒙开发中如何实现镂空效果？

Answer 1

利用 canvas 绘制镂空圆形然后使用 Stack 组件叠加在需要透明展示的区域上，参考代码如下：

@Entry
@Component
struct Page {
  @State message: string = 'Hello World';
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State circleCenterX: number = 0
  @State circleCenterY: number = 0
  @State circleRadius: number = 100

  build() {
    Row() {
      Column() {
        Stack() {
          Image($r('app.media.startIcon')).height(300)
          // 使用 Canvas 绘制遮罩覆盖在图片、相机等上面
          Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#00000000')
          .onReady(() => {
              this.circleCenterX = this.context.width / 2
              this.circleCenterY = this.context.height / 2
              this.context.fillStyle = '#aa000000'
              // 绘制原型路径进行半透明填充
              this.context.beginPath()
              this.contex
         }
      }
    }
  }
}