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