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

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

示例代码

js 复制代码
// 定义一个名为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的矩形。接着,我们在该矩形的中央清除了一块矩形区域,从而实现了矩形镂空的效果。

  1. 实心圆镂空

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

  1. 文字镂空

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

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

相关推荐
遇到困难睡大觉哈哈6 小时前
鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍
华为·harmonyos·鸿蒙
MarkHD8 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
塞尔维亚大汉9 小时前
OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【用户态内存调测】
操作系统·harmonyos
别说我什么都不会9 小时前
鸿蒙轻内核M核源码分析系列五 时间管理
操作系统·harmonyos
李小轰_Rex13 小时前
现有Flutter项目适配鸿蒙:探索跨平台开发的无限可能
前端·flutter·harmonyos
weioule18 小时前
仿叮咚买菜鸿蒙原生APP
华为·harmonyos
Gratitute_林腾18 小时前
HarmonyOS4-工具安装
harmonyos
咸鱼过江19 小时前
openharmony中hdf框架的设备节点(HdfDeviceNode)和设备实例(HdfDevice)的区别
c语言·harmonyos·hdf框架
枫叶丹420 小时前
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(四) -> 常见组件(二) -> tabs
开发语言·前端·javascript·华为·华为云·harmonyos
万少2 天前
软x、中x、城x、翼x、拓x、华xxOD2月鸿蒙面试核心汇总
前端·harmonyos