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