1# @ohos.arkui.drawableDescriptor (DrawableDescriptor) 2 3本模块提供获取pixelMap的能力，包括前景、背景、蒙版和分层图标。 4 5> **说明：** 6> 7> 本模块首批接口从API version 10开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8> 9> 示例效果请以真机运行为准，当前IDE预览器不支持。 10 11## 导入模块 12 13```ts 14import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'; 15``` 16 17## DrawableDescriptor 18 19### getPixelMap 20 21getPixelMap(): image.PixelMap 22 23获取pixelMap。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**返回值：** 28 29| 类型 | 说明 | 30| ---------------------------------------- | -------- | 31| [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | PixelMap | 32 33**示例：** 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 42当传入资源id或name为普通图片时，生成DrawableDescriptor对象。 43 44## LayeredDrawableDescriptor 45 46当传入资源id或name为包含前景和背景资源的json文件时，生成LayeredDrawableDescriptor对象。继承自[DrawableDescriptor](#drawabledescriptor) 47 48drawable.json位于项目工程entry/src/main/resources/base/media目录下。定义请参考： 49 50```json 51{ 52 "layered-image": 53 { 54 "background" : "$media:background", 55 "foreground" : "$media:foreground" 56 } 57} 58``` 59 60**示例：** 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 86获取前景、背景和蒙版融合裁剪后的pixelMap。 87 88**系统能力：** SystemCapability.ArkUI.ArkUI.Full 89 90**返回值：** 91 92| 类型 | 说明 | 93| ---------------------------------------- | -------- | 94| [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | PixelMap | 95 96**示例：** 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 108获取前景的DrawableDescriptor对象。 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112**返回值：** 113 114| 类型 | 说明 | 115| ---------------------------------------- | -------------------- | 116| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | 117 118**示例：** 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 131获取背景的DrawableDescriptor对象。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135**返回值：** 136 137| 类型 | 说明 | 138| ---------------------------------------- | -------------------- | 139| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | 140 141**示例：** 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 154获取蒙版的DrawableDescriptor对象。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**返回值：** 159 160| 类型 | 说明 | 161| ---------------------------------------- | -------------------- | 162| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | 163 164**示例：** 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 176LayeredDrawableDescriptor的静态方法，获取系统内置的裁切路径参数。 177 178**系统能力：** SystemCapability.ArkUI.ArkUI.Full 179 180**返回值：** 181 182| 类型 | 说明 | 183| ---------------------------------------- | -------------------- | 184| string | 返回裁切路径的命令字符串 | 185 186**示例：** 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(`获取系统内置的裁剪路径参数：`) 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 ```