【鸿蒙实战开发】HarmonyOS如何通过BlendMode属性来实现挂件和图片的混合

介绍

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

效果图预览

使用说明 ：

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

实现思路

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

1.挂件Image组件绑定BlendMode属性，属性值初始化为BlendMode.NONE。源码参考BlendModeView.ets。

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)

2.点击挂件区域，通过currentBlendMode变量来改变混合模式。源码参考BlendModeView.ets。

if (this.currentBlendMode === item.blendMode) {
  this.currentBlendMode = BlendMode.DST;