• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.drawableDescriptor (DrawableDescriptor)
2
3The **DrawableDescriptor** module provides APIs for obtaining **pixelMap** objects, including the foreground, background, mask, and layered icons.
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8>
9> You can preview how this component looks on a real device, but not in the DevEco Studio Previewer.
10
11## Modules to Import
12
13```ts
14import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor';
15```
16
17## DrawableDescriptor.constructor
18constructor()
19
20Creates a **DrawableDescriptor** or **LayeredDrawableDescriptor** object. The [getDrawableDescriptor](js-apis-resource-manager.md#getdrawabledescriptor10) or [getDrawableDescriptorByName](js-apis-resource-manager.md#getdrawabledescriptorbyname10) API is required for object construction.
21
22**System API**: This is a system API.
23
24**System capability**: SystemCapability.ArkUI.ArkUI.Full
25
26### DrawableDescriptor
27
28Creates a **DrawableDescriptor** object when the passed resource ID or name belongs to a common image.
29
30### LayeredDrawableDescriptor
31
32Creates a **LayeredDrawableDescriptor** object when the passed resource ID or name belongs to a JSON file that contains foreground and background resources.
33
34The content of the **drawble.json** file is as follows:
35
36```json
37{
38  "layered-image":
39  {
40    "background" : "$media:background",
41    "foreground" : "$media:foreground"
42  }
43}
44```
45
46**Example**
47```ts
48// xxx.ets
49import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
50
51@Entry
52@Component
53struct Index {
54  private resManager = getContext().resourceManager
55
56  build() {
57    Row() {
58      Column() {
59        Image((this.resManager.getDrawableDescriptor($r('app.media.icon').id) as LayeredDrawableDescriptor))
60        Image(((this.resManager.getDrawableDescriptor($r('app.media.icon')
61          .id) as LayeredDrawableDescriptor).getForeground()).getPixelMap())
62      }.height('50%')
63    }.width('50%')
64  }
65}
66```
67
68## DrawableDescriptor.getPixelMap
69getPixelMap(): image.PixelMap;
70
71Obtains this **pixelMap** object.
72
73**System capability**: SystemCapability.ArkUI.ArkUI.Full
74
75**Return value**
76
77| Type                                      | Description      |
78| ---------------------------------------- | -------- |
79| [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.|
80
81**Example**
82  ```ts
83import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
84let resManager = getContext().resourceManager
85let pixmap: DrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.icon')
86    .id)) as DrawableDescriptor;
87let pixmapNew: object = pixmap.getPixelMap()
88  ```
89
90## LayeredDrawableDescriptor.getPixelMap
91getPixelMap(): image.PixelMap;
92
93Obtains the **pixelMap** object where the foreground, background, and mask are blended and cropped.
94
95**System capability**: SystemCapability.ArkUI.ArkUI.Full
96
97**Return value**
98
99| Type                                      | Description      |
100| ---------------------------------------- | -------- |
101| [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.|
102
103**Example**
104  ```ts
105import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
106let resManager = getContext().resourceManager
107let pixmap: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.icon')
108    .id)) as LayeredDrawableDescriptor;
109let pixmapNew: object = pixmap.getPixelMap()
110  ```
111
112## LayeredDrawableDescriptor.getForeground
113getForeground(): DrawableDescriptor;
114
115Obtains the **DrawableDescriptor** object of the foreground.
116
117**System capability**: SystemCapability.ArkUI.ArkUI.Full
118
119**Return value**
120
121| Type                                      | Description                  |
122| ---------------------------------------- | -------------------- |
123| [DrawableDescriptor](#drawabledescriptor) | **DrawableDescriptor** object.|
124
125**Example**
126  ```ts
127import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
128let resManager = getContext().resourceManager
129let drawable: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.icon')
130    .id)) as LayeredDrawableDescriptor;
131let drawableNew: object =drawable.getForeground()
132  ```
133
134## LayeredDrawableDescriptor.getBackground
135getBackground(): DrawableDescriptor;
136
137Obtains the **DrawableDescriptor** object of the background.
138
139**System capability**: SystemCapability.ArkUI.ArkUI.Full
140
141**Return value**
142
143| Type                                      | Description                  |
144| ---------------------------------------- | -------------------- |
145| [DrawableDescriptor](#drawabledescriptor) | **DrawableDescriptor** object.|
146
147**Example**
148  ```ts
149import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
150let resManager = getContext().resourceManager
151let drawable: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.icon')
152    .id)) as LayeredDrawableDescriptor;
153let drawableNew: object =drawable.getBackground()
154  ```
155
156## LayeredDrawableDescriptor.getMask
157getMask(): DrawableDescriptor;
158
159Obtains the **DrawableDescriptor** object of the mask.
160
161**System capability**: SystemCapability.ArkUI.ArkUI.Full
162
163**Return value**
164
165| Type                                      | Description                  |
166| ---------------------------------------- | -------------------- |
167| [DrawableDescriptor](#drawabledescriptor) | **DrawableDescriptor** object.|
168
169**Example**
170  ```ts
171import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
172let resManager = getContext().resourceManager
173let drawable: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.icon')
174    .id)) as LayeredDrawableDescriptor;
175let drawableNew: object =drawable.getMask()
176  ```
177## LayeredDrawableDescriptor.getMaskClipPath
178static getMaskClipPath(): string
179
180Obtains the built-in clipping path parameters of the system. It is a static method of **LayeredDrawableDescriptor**.
181
182**System capability**: SystemCapability.ArkUI.ArkUI.Full
183
184**Return value**
185
186| Type                                      | Description                  |
187| ---------------------------------------- | -------------------- |
188| string | String of the clipping path.|
189
190**Example**
191
192  ```ts
193// xxx.ets
194import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
195
196@Entry
197@Component
198struct Index {
199  build() {
200    Row() {
201      Column() {
202        Image($r('app.media.icon'))
203          .width('200px').height('200px')
204          .clip(new Path({commands:LayeredDrawableDescriptor.getMaskClipPath()}))
205        Text(`Obtain the built-in clip path parameters:`)
206          .fontWeight(800)
207        Text(JSON.stringify(LayeredDrawableDescriptor.getMaskClipPath()))
208          .padding({ left: 20, right: 20 })
209      }.height('100%').justifyContent(FlexAlign.Center)
210    }.width('100%')
211  }
212}
213  ```
214