1# 图像效果 (系统接口) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9设置组件与下方画布已有内容进行混合的图像效果。 10 11> **说明：** 12> 13> 本模块首批接口从API version 13开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 14> 15> 当前页面仅包含本模块的系统接口，其他公开接口参见[图像效果](ts-universal-attributes-image-effect.md)。 16 17## advancedBlendMode 18 19advancedBlendMode(effect: BlendMode | Blender, type?: BlendApplyType): T 20 21将当前组件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。不能与[blendMode](ts-universal-attributes-image-effect.md#blendmode11)接口同时使用。 22 23**卡片能力：** 从API version 13开始，该接口支持在ArkTS卡片中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**系统接口：** 此接口为系统接口。 28 29**参数：** 30 31| 参数名 | 类型 | 必填 | 说明 | 32| ------ | ------------------------------- | ---- | ------------------------------------------------------------ | 33| effect | [BlendMode](ts-universal-attributes-image-effect.md#blendmode11枚举说明) \| [Blender](../../apis-arkgraphics2d/js-apis-uiEffect-sys.md#blender13) | 是 | 入参类型为BlendMode时表示混合模式。<br/>默认值：BlendMode.NONE <br/>入参类型为Blender时表示混合器类型，用于描述混合效果。<br/>需要使用uiEffect模块中的方法创建Blender实例。例如：[uiEffect.createBrightnessBlender](../../apis-arkgraphics2d/js-apis-uiEffect-sys.md#uieffectcreatebrightnessblender)。使用自定义object作为入参不会生效。 | 34| type | [BlendApplyType](ts-universal-attributes-image-effect.md#blendapplytype11枚举说明) | 否 | blendMode实现方式是否离屏。<br/>默认值：BlendApplyType.FAST<br/>**说明：**<br/>1. 设置BlendApplyType.FAST时，不离屏。<br/>2. 设置BlendApplyType.OFFSCREEN时，会创建当前组件大小的离屏画布，再将当前组件（含子组件）的内容绘制到离屏画布上，再用指定的混合模式与下方画布已有内容进行混合。<br/>3. 不离屏情况下对文字类组件中emoji表情不生效。 | 35 36**返回值：** 37 38| 类型 | 说明 | 39| -------- | -------- | 40| T | 返回当前组件。 | 41 42## 示例 43 44该示例主要通过advancedBlendMode给组件添加提亮效果。 45 46```ts 47// xxx.ets 48import { uiEffect } from "@kit.ArkGraphics2D"; 49 50// uiEffect.createBrightnessBlender创建BrightnessBlender实例用于给组件添加提亮效果 51let blender: uiEffect.BrightnessBlender = uiEffect.createBrightnessBlender({ 52 cubicRate: 0.5, 53 quadraticRate: 0.5, 54 linearRate: 0.5, 55 degree: 0.5, 56 saturation: 0.5, 57 positiveCoefficient: [2.3, 4.5, 2.0], 58 negativeCoefficient: [0.5, 2.0, 0.5], 59 fraction: 0.5 60}); 61// 自定义object作为入参不会生效 62let blender1: uiEffect.BrightnessBlender = { 63 cubicRate: 0.5, 64 quadraticRate: 0.5, 65 linearRate: 0.5, 66 degree: 0.5, 67 saturation: 0.5, 68 positiveCoefficient: [2.3, 4.5, 2.0], 69 negativeCoefficient: [0.5, 2.0, 0.5], 70 fraction: 0.5 71}; 72 73@Entry 74@Component 75struct Index { 76 build() { 77 Stack() { 78 Image($r('app.media.img_1')) 79 80 Column() { 81 Text(String.fromCodePoint(0x1F600) + 'TEST') 82 .fontSize(60) 83 84 Text(String.fromCodePoint(0x1F600) + 'FAST') 85 .fontSize(60) 86 .advancedBlendMode(blender) 87 88 Text(String.fromCodePoint(0x1F600) + 'OFFSCREEN') 89 .fontSize(60) 90 .advancedBlendMode(blender, BlendApplyType.OFFSCREEN) 91 92 Text(String.fromCodePoint(0x1F600) + 'TEST') 93 .fontSize(60) 94 .advancedBlendMode(blender1) 95 } 96 } 97 } 98} 99``` 100 101效果图如下： 102 103
