鸿蒙应用示例：镂空效果实现教程

在鸿蒙系统中，为了给用户带来更加生动的视觉体验，我们可以使用不同的技术手段来实现图像和文字的镂空效果。本文将通过三个具体的示例来展示如何在鸿蒙系统中实现实心矩形镂空、实心圆镂空以及文字镂空的效果。

示例代码

// 定义一个名为Index的应用入口组件
@Entry
@Component
struct Index {
  // 初始化绘图上下文所需的设置
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  // 创建两个用于绘制不同图案的Canvas绘图上下文
  private contextForRectangle: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private contextForCircle: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  // 构建UI
  build() {
    // 使用Column布局，设置每个子元素之间的间隔为5
    Column({ space: 5 }) {
      // 第一个示例：实心矩形镂空
      Text('1. 实心矩形镂空')

      Stack() {
        // 在Stack中放置一个图像作为背景
        Image($r('app.media.startIcon')).width(200).height(200).enableAnalyzer(true)

        // 创建一个Canvas，并在准备就绪后执行绘图逻辑
        Canvas(this.contextForRectangle).width(80).height(80).backgroundColor(undefined).onReady(async () => {
          // 设置填充色
          this.contextForRectangle.fillStyle = 'rgba(0, 255, 255, 1)';

          // 绘制一个覆盖整个Canvas的矩形
          this.contextForRectangle.fillRect(0, 0, 80, 80);

          // 在矩形中心位置创建一个镂空矩形
          this.contextForRectangle.clearRect(10, 20, 50, 40);
        });
      }.width(300)

      // 第二个示例：实心圆镂空
      Text('2. 实心圆镂空')

      Stack() {
        Image($r('app.media.startIcon')).width(200).height(200).enableAnalyzer(true)

        // 创建一个Canvas，并在准备就绪后执行绘图逻辑
        Canvas(this.contextForCircle).width(80).height(80).backgroundColor(undefined).onReady(async () => {
          // 清除背景
          this.contextForCircle.clearRect(0, 0, 80, 80);

          // 设置填充色
          this.contextForCircle.fillStyle = 'rgba(0, 255, 255, 1)';

          // 绘制一个覆盖整个Canvas的矩形
          this.contextForCircle.fillRect(0, 0, 80, 80);

          // 画一个圆形镂空
          this.contextForCircle.beginPath();
          this.contextForCircle.arc(40, 40, 30, 0, Math.PI * 2); // 圆心坐标为(40, 40)，半径为30
          this.contextForCircle.globalCompositeOperation = 'destination-out';
          this.contextForCircle.fill();
        });
      }

      // 第三个示例：文字镂空
      Text('3. 文字镂空')

      Stack() {
        // 背景图像
        Image($r('app.media.startIcon')).width(200).height(200).enableAnalyzer(true)

        Stack() {
          // 在内部Stack中绘制镂空文字
          Text('鸿蒙')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.XOR, BlendApplyType.OFFSCREEN)
        }.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
        .backgroundColor('rgba(0, 255, 255, 1)')
        .width(80).height(80)

      }.width(200).height(200)
    }.width('100%')
  }
}

案例解析

1. 实心矩形镂空

在这个例子中，我们首先创建了一个Canvas实例，并在准备好后绘制了一个完全覆盖Canvas的矩形。接着，我们在该矩形的中央清除了一块矩形区域，从而实现了矩形镂空的效果。

2. 实心圆镂空

对于圆形镂空，我们同样先绘制一个覆盖整个Canvas的矩形，然后在一个新路径中绘制圆形并设置 globalCompositeOperation 为 'destination-out'，这样就会在矩形中挖出一个圆形的镂空。

3. 文字镂空

最后，在文字镂空的例子中，我们先绘制了一个背景图像，然后在图像上绘制了“鸿蒙”这两个字。通过设置 blendMode 为 'XOR' 和 'SRC_OVER'，使得文字呈现镂空效果。

通过上述方法，你可以轻松地在鸿蒙系统中实现不同类型的镂空效果。希望这个教程能帮助你更好地理解和运用这些技术！