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.constructor 18constructor() 19 20创建DrawableDescriptor或LayeredDrawableDescriptor对象。对象构造需要使用全球化接口[getDrawableDescriptor](js-apis-resource-manager.md#getdrawabledescriptor)或[getDrawableDescriptorByName](js-apis-resource-manager.md#getdrawabledescriptorbyname)。 21 22**系统接口：** 此接口为系统接口。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26### DrawableDescriptor 27 28当传入资源id或name为普通图片时，生成DrawableDescriptor对象。 29 30### LayeredDrawableDescriptor 31 32当传入资源id或name为包含前景和背景资源的json文件时，生成LayeredDrawableDescriptor对象。 33 34drawable.json位于项目工程entry/src/main/resources/base/media目录下。定义请参考： 35 36```json 37{ 38 "layered-image": 39 { 40 "background" : "$media:background", 41 "foreground" : "$media:foreground" 42 } 43} 44``` 45 46**示例：** 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.drawable').id) as LayeredDrawableDescriptor)) 60 Image(((this.resManager.getDrawableDescriptor($r('app.media.drawable') 61 .id) as LayeredDrawableDescriptor).getForeground()).getPixelMap()) 62 }.height('50%') 63 }.width('50%') 64 } 65} 66``` 67 68## DrawableDescriptor.getPixelMap 69getPixelMap(): image.PixelMap; 70 71获取pixelMap。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**返回值：** 76 77| 类型 | 说明 | 78| ---------------------------------------- | -------- | 79| [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | PixelMap | 80 81**示例：** 82 ```ts 83import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor' 84let resManager = getContext().resourceManager 85let pixmap: DrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.drawable') 86 .id)) as DrawableDescriptor; 87let pixmapNew: object = pixmap.getPixelMap() 88 ``` 89 90## LayeredDrawableDescriptor.getPixelMap 91getPixelMap(): image.PixelMap; 92 93获取前景、背景和蒙版融合裁剪后的pixelMap。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97**返回值：** 98 99| 类型 | 说明 | 100| ---------------------------------------- | -------- | 101| [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | PixelMap | 102 103**示例：** 104 ```ts 105import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor' 106let resManager = getContext().resourceManager 107let pixmap: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.drawable') 108 .id)) as LayeredDrawableDescriptor; 109let pixmapNew: object = pixmap.getPixelMap() 110 ``` 111 112## LayeredDrawableDescriptor.getForeground 113getForeground(): DrawableDescriptor; 114 115获取前景的DrawableDescriptor对象。 116 117**系统能力：** SystemCapability.ArkUI.ArkUI.Full 118 119**返回值：** 120 121| 类型 | 说明 | 122| ---------------------------------------- | -------------------- | 123| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | 124 125**示例：** 126 ```ts 127import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor' 128let resManager = getContext().resourceManager 129let drawable: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.drawable') 130 .id)) as LayeredDrawableDescriptor; 131let drawableNew: object =drawable.getForeground() 132 ``` 133 134## LayeredDrawableDescriptor.getBackground 135getBackground(): DrawableDescriptor; 136 137获取背景的DrawableDescriptor对象。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141**返回值：** 142 143| 类型 | 说明 | 144| ---------------------------------------- | -------------------- | 145| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | 146 147**示例：** 148 ```ts 149import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor' 150let resManager = getContext().resourceManager 151let drawable: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.drawable') 152 .id)) as LayeredDrawableDescriptor; 153let drawableNew: object =drawable.getBackground() 154 ``` 155 156## LayeredDrawableDescriptor.getMask 157getMask(): DrawableDescriptor; 158 159获取蒙版的DrawableDescriptor对象。 160 161**系统能力：** SystemCapability.ArkUI.ArkUI.Full 162 163**返回值：** 164 165| 类型 | 说明 | 166| ---------------------------------------- | -------------------- | 167| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | 168 169**示例：** 170 ```ts 171import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor' 172let resManager = getContext().resourceManager 173let drawable: LayeredDrawableDescriptor = (resManager.getDrawableDescriptor($r('app.media.drawable') 174 .id)) as LayeredDrawableDescriptor; 175let drawableNew: object =drawable.getMask() 176 ``` 177## LayeredDrawableDescriptor.getMaskClipPath 178static getMaskClipPath(): string 179 180LayeredDrawableDescriptor的静态方法，获取系统内置的裁切路径参数。 181 182**系统能力：** SystemCapability.ArkUI.ArkUI.Full 183 184**返回值：** 185 186| 类型 | 说明 | 187| ---------------------------------------- | -------------------- | 188| string | 返回裁切路径的命令字符串 | 189 190**示例：** 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(`获取系统内置的裁剪路径参数：`) 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 ```