【入门到精通】鸿蒙next应用开发：图片混合实现案例

炫酷盖茨猫先生

于 2025-04-24 14:14:30 发布

阅读量234

点赞数 4

分类专栏：鸿蒙5.0开发 ArkUI框架 ArkTS组件文章标签： harmonyos 华为 ArkUI ArkTS android 鸿蒙系统前端

本文链接：https://blog.csdn.net/m0_73088370/article/details/147477542

版权

鸿蒙5.0开发同时被 3 个专栏收录

787 篇文章

订阅专栏

ArkTS组件

568 篇文章

订阅专栏

ArkUI框架

415 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

介绍

本实例主要通过BlendMode属性来实现挂件和图片的混合，通过更改不同的混合参数，能够展示不同的混合效果。

效果图预览

使用说明：

进入页面，点击挂件区域，进行挂件和图片的混合，点击不同的挂件，展示不同的挂件和混合效果，再次点击取消混合效果以及挂件。

实现思路

首先将挂件Image组件绑定BlendMode属性，currentBlendMode控制混合模式更改的变量，初始化为BlendMode.NONE，不进行任何混合操作，点击挂件区域，切换不同的混合模式达到不同的混合效果。

挂件Image组件绑定BlendMode属性，属性值初始化为BlendMode.NONE。

Image(this.currentUserPendant)
  .width($r('app.integer.blend_mode_image_size'))
  .height($r('app.integer.blend_mode_image_size'))
  .borderRadius($r('app.integer.blend_mode_image_border_radius'))
  .blendMode(this.currentBlendMode, BlendApplyType.OFFSCREEN)

点击挂件区域，通过currentBlendMode变量来改变混合模式。

if (this.currentBlendMode === item.blendMode) {
  this.currentBlendMode = BlendMode.DST;
  this.currentUserPendant = '';
  this.currentIndex = -1;
  return;
}
// TODO:知识点:点击切换混合模式
this.currentIndex = index;
this.currentUserPendant = item.pendantImage;
this.currentBlendMode = item.blendMode;

高性能知识点

数据通过LazyForEach进行遍历。

工程结构&模块类型

blendmode                                // har类型
|---model
|   |---DataSource.ets                   // 数据资源
|   |---DataType.ets                     // 数据类型
|   |---MockData.ets                     // 模拟数据
|---view
|   |---BlendModeView.ets                // 视图层-应用主页面