• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.graphics.uiEffect (效果级联)
2
3<!--Kit: ArkGraphics 2D-->
4<!--Subsystem: Graphics-->
5<!--Owner: @hanamaru-->
6<!--Designer: @comicchang-->
7<!--Tester: @gcw_fsLqk7gL-->
8<!--Adviser: @ge-yafang-->
9
10本模块提供组件效果的一些基础能力，包括模糊、边缘像素扩展、提亮等。效果被分为Filter和VisualEffect大类，同类效果可以级联在一个效果大类的实例下。在实际开发中，模糊可用于背景虚化，提亮可用于亮屏显示等。
11
12- [Filter](#filter)：用于添加指定Filter效果到组件上。
13- [VisualEffect](#visualeffect)：用于添加指定VisualEffect效果到组件上。
14
15> **说明：**
16>
17> 本模块首批接口从API version 12开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
18
19## 导入模块
20
21```ts
22import { uiEffect } from "@kit.ArkGraphics2D";
23```
24
25## uiEffect.createFilter
26createFilter(): Filter
27
28创建Filter实例用于给组件添加多种filter效果。
29
30**系统能力：** SystemCapability.Graphics.Drawing
31
32**返回值：**
33
34| 类型              | 说明                 |
35| ------------------| ------------------- |
36| [Filter](#filter) | 返回Filter的头节点。 |
37
38**示例：**
39
40```ts
41let filter : uiEffect.Filter = uiEffect.createFilter()
42```
43
44## uiEffect.createEffect
45createEffect(): VisualEffect
46
47创建VisualEffect实例用于给组件添加多种effect效果。
48
49**系统能力：** SystemCapability.Graphics.Drawing
50
51**返回值：**
52
53| 类型                          | 说明                       |
54| ----------------------------- | ------------------------- |
55| [VisualEffect](#visualeffect) | 返回VisualEffect的头节点。 |
56
57**示例：**
58
59```ts
60let visualEffect : uiEffect.VisualEffect = uiEffect.createEffect()
61```
62
63## Filter
64Filter效果类，用于将相应的效果添加到指定的组件上。在调用Filter的方法前，需要先通过[createFilter](#uieffectcreatefilter)创建一个Filter实例。
65
66### blur
67blur(blurRadius: number): Filter
68
69将模糊效果添加至组件上。
70
71**系统能力：** SystemCapability.Graphics.Drawing
72
73**参数：**
74| 参数名       | 类型   | 必填 | 说明       |
75| ----------- | -------| ---- | --------- |
76| blurRadius  | number | 是   | 模糊半径。<br/>取值需大于等于0，模糊半径越大，模糊效果越强。<br/>模糊半径为0时无模糊效果。 |
77
78**返回值：**
79
80| 类型               | 说明                       |
81| ----------------- | -------------------------- |
82| [Filter](#filter) | 返回挂载了模糊效果的Filter。 |
83
84**示例：**
85
86```ts
87// xxx.ts
88import { uiEffect } from '@kit.ArkGraphics2D';
89
90let filter: uiEffect.Filter = uiEffect.createFilter();
91filter.blur(10);
92
93@Entry
94@Component
95struct UIEffectFilterExample {
96    build(){
97        Column({ space: 15 }) {
98            Text('UIEffectFilter').fontSize(20).width('75%').fontColor('#DCDCDC')
99            Image($r('app.media.foreground'))
100                .width(100)
101                .height(100)
102                .backgroundImage($r('app.media.background'))
103                .backgroundImagePosition(Alignment.Center)
104                .backgroundImageSize({ width: 90, height: 90 })
105                .backgroundFilter(filter)
106        }
107        .height('100%')
108        .width('100%')
109    }
110}
111```
112
113## VisualEffect
114VisualEffect效果类，用于将相应的效果添加到指定的组件上。在调用VisualEffect的方法前，需要先通过[createEffect](#uieffectcreateeffect)创建一个VisualEffect实例。