diff --git a/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md b/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md new file mode 100644 index 0000000000000000000000000000000000000000..dececbfebf0b5d76bb9e57266f7a97a70a08b0f7 --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md @@ -0,0 +1,135 @@ +# @ohos.arkui.drawableDescriptor (DrawableDescriptor) + +本模块提供获取pixelMap的能力,包括前景、背景、蒙版和分层图标。 + +> **说明:** +> +> 本模块首批接口从API version 10开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 +> +> 示例效果请以真机运行为准,当前IDE预览器不支持。 + +## 导入模块 + +```js +import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'; +``` + +## DrawableDescriptor.constructor +constructor() + +创建DrawableDescriptor或LayeredDrawableDescriptor对象。对象构造需要使用全球化接口[getDrawableDescriptor](js-apis-resource-manager.md##getdrawabledescriptor)或[getDrawableDescriptorByName](js-apis-resource-manager.md##getdrawabledescriptorbyname)。 + +**系统接口:** 此接口为系统接口。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +### DrawableDescriptor + +当传入资源id或name为普通图片时,生成DrawableDescriptor对象。 + +### LayeredDrawableDescriptor + +当传入资源id或name为包含前景和背景资源的json文件时,生成LayeredDrawableDescriptor对象。 + +**示例:** +```js +@Entry +@Component +struct Index { + private resManager = getContext().resourceManager + let drawable1 = resManager.getDrawableDescriptor($r('app.media.icon').id) + let drawable2 = resManager.getDrawableDescriptorByName(icon) + let layeredDrawable1 = resManager.getDrawableDescriptor($r('app.media.file').id) + let layeredDrawable1 = resManager.getDrawableDescriptor(file) + } +``` + +## DrawableDescriptor.getPixelMap +getPixelMap(): image.PixelMap; + +获取pixelMap。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +**返回值:** + +| 类型 | 说明 | +| --------------------------------- | ---------------- | +| [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | PixelMap | + +**示例:** + ```js + @State pixmap: PixelMap = drawable1.getPixelMap(); + ``` + +## LayeredDrawableDescriptor.getPixelMap +getPixelMap(): image.PixelMap; + +获取前景、背景和蒙版融合裁剪后的pixelMap。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +**返回值:** + +| 类型 | 说明 | +| --------------------------------- | ---------------- | +| [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | PixelMap | + +**示例:** + ```js + @State pixmap: PixelMap = layeredDrawable1.getPixelMap(); + ``` + +## LayeredDrawableDescriptor.getForeground +getForeground(): DrawableDescriptor; + +获取前景的DrawableDescriptor对象。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +**返回值:** + +| 类型 | 说明 | +| --------------------------------- | ---------------- | +| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | + +**示例:** + ```js + @State drawable: DrawableDescriptor = layeredDrawable1.getForeground(); + ``` + +## LayeredDrawableDescriptor.getBackground +getBackground(): DrawableDescriptor; + +获取背景的DrawableDescriptor对象。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +**返回值:** + +| 类型 | 说明 | +| --------------------------------- | ---------------- | +| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | + +**示例:** + ```js + @State drawable: DrawableDescriptor = layeredDrawable1.getBackground(); + ``` + +## LayeredDrawableDescriptor.getMask +getMask(): DrawableDescriptor; + +获取蒙版的DrawableDescriptor对象。 + +**系统能力:** SystemCapability.ArkUI.ArkUI.Full + +**返回值:** + +| 类型 | 说明 | +| --------------------------------- | ---------------- | +| [DrawableDescriptor](#drawabledescriptor) | DrawableDescriptor对象 | + +**示例:** + ```js + @State drawable: DrawableDescriptor = layeredDrawable1.getMask(); + ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index 0492a368d84457e0fb99e7ed3be7257f1d27308e..fd5c26143a819aeb9e37370e0ae8de279f25dfed 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -19,7 +19,7 @@ ## 接口 -Image(src: string | PixelMap | Resource) +(src: PixelMap | ResourceStr | DrawableDescriptor) 通过图片数据源获取图片,用于后续渲染展示。 @@ -29,7 +29,7 @@ Image(src: string | PixelMap | Resource) | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource类型) | 是 | 图片的数据源,支持本地图片和网络图片。
当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持跨包/跨模块调用该Image组件,建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`datashare://`路径前缀的字符串,用于访问通过data ability提供的图片路径。图片加载前需要申请[媒体库功能相关权限](../../file-management/medialibrary-overview.md#申请媒体库功能相关权限)
\- 支持file:///data/storage路径前缀的字符串,用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。
**说明:**
- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。
- ArkTS卡片上不支持`http://`等网络相关路径前缀、`datashare://`路径前缀以及`file://data/storage`路径前缀的字符串
- ArkTS卡片上不支持 [PixelMap](../apis/js-apis-image.md#pixelmap7)类型 | +| src |  [PixelMap](../apis/js-apis-image.md#pixelmap7) \|ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | 是 | 图片的数据源,支持本地图片和网络图片。
当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持跨包/跨模块调用该Image组件,建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`datashare://`路径前缀的字符串,用于访问通过data ability提供的图片路径。图片加载前需要申请[媒体库功能相关权限](../../file-management/medialibrary-overview.md#申请媒体库功能相关权限)
\- 支持file:///data/storage路径前缀的字符串,用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。
\- 支持[DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor)对象
**说明:**
- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。
- ArkTS卡片上不支持`http://`等网络相关路径前缀、`datashare://`路径前缀以及`file://data/storage`路径前缀的字符串
- ArkTS卡片上不支持 [PixelMap](../apis/js-apis-image.md#pixelmap7)类型 | ## 属性