首页 > 其他分享 >鸿蒙应用示例:镂空效果实现教程

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

时间:2024-10-05 20:20:32浏览次数:8  
标签:Canvas 鸿蒙 示例 width 80 矩形 contextForCircle 镂空

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

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

示例代码

// 定义一个名为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',使得文字呈现镂空效果。

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

标签:Canvas,鸿蒙,示例,width,80,矩形,contextForCircle,镂空
From: https://blog.51cto.com/u_16508701/12175203

相关文章

  • DataInOut 文件输入输出示例
    publicclassDataInOutTest{publicstaticvoidmain(String[]args){DataOutputStreamdos=null;DataInputStreamdis=null;FileInputStreamfis=null;FileOutputStreamfos=null;try{fis=newFileInp......
  • 鸿蒙应用示例:实现文本高亮与自动换行
    在设计应用界面时,我们常常需要对某些重要的文本进行高亮显示,以引起用户的注意。同时,在一些场景中,我们需要确保长文本能够自动换行,以适应不同的屏幕尺寸和布局需求。本文将通过两个示例,分别展示如何在HarmonyOS应用中实现这些功能。【示例一】文本高亮显示@Entry@Componentstruct......
  • 鸿蒙应用示例:ArkTS中设置颜色透明度与颜色渐变方案探讨
    /***根据比例混合两个十六进制颜色值。*@paramcolorA第一个颜色的十六进制值,例如红色'#ff0000'。*@paramcolorB第二个颜色的十六进制值,例如黑色'#000000'。*@paramratio混合比例,0表示仅返回colorA,1表示仅返回colorB,介于0和1之间的值会混合两个颜色。......
  • 鸿蒙应用示例:应用开发中的动态获取属性与调用方法技巧
    随着HarmonyOS的发展,API版本的更新带来了许多新的特性和限制。在API11及以后的版本中,直接赋值对象的语法不再被支持,这要求开发者们采用新的方式来处理对象的创建和属性的访问。同时,HarmonyOS支持ETS(EnhancedTypeScript)文件,这是一种扩展了TypeScript的文件格式,用于更好地支持Harmo......
  • 鸿蒙应用示例:NEXT 中 Map 类型的使用及注意事项
    在JavaScript中,Map对象允许存储任何类型的键和值,提供了键值对的存储功能。在HarmonyOS中,Map的使用基本遵循JavaScript的标准,尤其是要注意set赋值只能用get获取,而索引赋值只能用索引获取。且它们可以同时赋值但遍历的方式又不同。【Map对象的赋值与获取】使用set方法赋值当你需要......
  • 征程6 工具链常用工具和 API 整理(含新手示例)
    1.引言征程6工具链目前已经提供了比较丰富的集成化工具和接口来支持模型的移植和量化部署,本帖将整理常用的工具/接口以及使用示例来供大家参考,相信这篇文章会提升大家对征程6工具链的使用理解以及效率。干货满满,欢迎访问2.hb_config_generatorhb_config_generator是用于获......
  • 第二百六十节 JPA教程 - JPA查询命名参数示例
    JPA教程-JPA查询命名参数示例JPQL支持两种类型的参数绑定语法。第一种是位置绑定,其中参数在查询字符串中通过问号后面跟随参数号来指示。执行查询时,开发人员指定应替换的参数编号。SELECTeFROMEmployeeeWHEREe.department=?1ANDe.salary>?2命名参数......
  • 鸿蒙应用示例:键盘管理从避免遮挡到显示监听的方案实践
    在HarmonyOS应用开发中,键盘管理是一个关键环节,直接影响着用户体验。本文将探讨HarmonyOS键盘管理的几个重要方面,包括如何避免软键盘遮挡输入框、键盘显示与隐藏的监听机制,以及如何手动控制键盘的显示与隐藏。一、避免软键盘遮挡输入框在默认情况下,当用户在输入框中输入文本时,软键盘......
  • 鸿蒙智联仅此4家生态解决方案合作伙伴
    在当今快速发展的物联网时代,鸿蒙智联(HarmonyOSConnect)作为华为面向智能硬件生态伙伴打造的全新品牌和开放平台,正引领着智能硬件行业的变革与创新。鸿蒙智联生态解决方案合作伙伴,作为这一生态中的重要力量,通过提供全方位的解决方案和技术支持,助力生态产品伙伴快速融入鸿蒙智联......
  • <<迷雾>> 第5章 从逻辑学到逻辑电路(4)--或门及其符号 示例电路
    info::操作说明鼠标单击开关切换开合状态系统中使用一个类似箭头的形状表示或门primary::在线交互操作链接https://cc.xiaogd.net/?startCircuitLink=https://book.xiaogd.net/cyjsjdmw-examples/assets/circuit/cyjsjdmw-ch05-13-or-gate.txt原图......