HarmonyOS鸿蒙Next开发：镂空效果

HarmonyOS鸿蒙Next开发：镂空效果

如何在鸿蒙中实现镂空效果

在现代 UI 设计中，镂空效果是一种常见的视觉设计手段，可以为应用增添层次感和创意亮点。本文将介绍如何在鸿蒙系统中使用 Canvas 和 混合模式 实现三种常见的镂空效果：矩形镂空、圆形镂空和文字镂空。

1. 镂空效果的基础概念

镂空效果的核心思想是通过“挖空”现有图形的一部分，露出背景内容。在鸿蒙开发中，我们可以利用 Canvas 绘图 API 和 混合模式 (Blend Mode) 来实现这一效果。

2. 示例代码解析

以下代码展示了如何实现三种镂空效果：矩形镂空、圆形镂空和文字镂空。

2.1 矩形镂空

功能描述

在背景图像上绘制一个矩形，并在矩形中心位置创建一个镂空区域。

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);
});

效果说明

  • fillRect 方法用于绘制一个实心矩形。
  • clearRect 方法用于清除矩形中的部分区域，形成镂空效果。

2.2 圆形镂空

功能描述

在背景图像上绘制一个圆形镂空效果。

实现代码

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(); // 应用填充
});

效果说明

使用 arc 方法绘制圆形路径
  • 调用 arc 方法可以在Canvas上绘制一条圆形路径。此方法需要指定圆心的 x 和 y 坐标、半径、起始弧度和结束弧度，以及一个布尔值来确定是否按逆时针方向绘制。
设置 globalCompositeOperation 属性为 destination-out
  • 将Canvas上下文对象的 globalCompositeOperation 属性设置为 destination-out 可以实现“挖空”效果，这意味着新的绘制操作将会从已有内容中“剪切”掉与新绘制形状重叠的部分。

2.3 文字镂空

功能描述

在背景图像上实现文字的镂空效果，使得文字部分透明，透过可以看到下层的内容。

实现代码

Stack() {
  Text('鸿蒙')
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
    .blendMode(BlendMode.XOR, BlendApplyType.OFFSCREEN); // 设置混合模式为XOR，实现文字镂空效果
}
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
.backgroundColor('rgba(0, 255, 255, 1)')
.width(80).height(80);

效果说明

  • 使用 Text 元素显示文字（如“鸿蒙”）。
  • 通过设置 blendMode 属性为 BlendMode.XOR，实现文字与背景的混合模式，从而形成镂空效果。

更多关于HarmonyOS鸿蒙Next开发：镂空效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这个镂空特效很牛

更多关于HarmonyOS鸿蒙Next开发：镂空效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


标题

有显示效果吗，

在HarmonyOS中实现镂空效果可以使用Shape组件结合Path的布尔运算。通过Path.addRect或Path.addCircle等API定义基础形状，再用Path.op进行差集运算（Path.Op.DIFFERENCE）实现镂空。例如：

@Entry
@Component
struct HollowEffect {
  build() {
    Column() {
      Shape() {
        Path()
          .addRect({width: 300, height: 300})
          .op(Path.Op.DIFFERENCE, 
              Path().addCircle(150, 150, 100))
      }
      .fill(Color.Blue)
    }
  }
}

该代码会在蓝色矩形中镂空圆形区域。关键点在于Path.op的差集运算参数。

在HarmonyOS Next中实现镂空效果确实可以通过Canvas和混合模式来实现。您提供的三种实现方式都很典型：

  1. 矩形镂空使用clearRect方法是最简单的实现方式，适合规则形状的镂空。

  2. 圆形镂空通过arc绘制路径配合globalCompositeOperation='destination-out’实现，这种方式可以扩展到任意形状的路径镂空。

  3. 文字镂空使用BlendMode.XOR混合模式，这是实现文字镂空的高效方式。

对于更复杂的镂空需求，还可以考虑：

  • 使用Path2D创建自定义路径

  • 结合多个混合模式实现更复杂的效果

  • 使用遮罩(Mask)组件

性能优化建议：

  1. 对于静态镂空效果，可以预渲染为图片

  2. 动态效果注意控制重绘频率

  3. 复杂路径考虑使用离屏Canvas

您的示例代码已经很好地展示了基础实现方式，可以作为开发参考。

回到顶部