纯血鸿蒙APP实战开发——图片混合案例

原创

小帅聊鸿蒙

发布于 2025-02-13 17:08:27

800

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本实例主要通过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)

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

点击挂件区域，通过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                // 视图层-应用主页面