未验证 提交 d85f0ecc 编写于 作者: L LiAn 提交者: Gitee

update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md.

Signed-off-by: NLiAn <lian15@huawei.com>
Signed-off-by: NLiAn <lian15@huawei.com>
上级 88a07c67
# Image
Image为图片组件,常用于在应用中显示图片。Image支持加载string、&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)[Resource](ts-types.md#resource类型)类型的数据源,支持png、jpg、bmp、svg和gif类型的图片格式。
Image为图片组件,常用于在应用中显示图片。Image支持加载[PixelMap](../apis/js-apis-image.md#pixelmap7)[ResourceStr](ts-types.md#resourcestr)[DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor)类型的数据源,支持png、jpg、bmp、svg和gif类型的图片格式。
> **说明:**
>
......@@ -19,7 +19,7 @@ Image为图片组件,常用于在应用中显示图片。Image支持加载stri
## 接口
Image(src: string | PixelMap | Resource)
Image(src: PixelMap | ResourceStr | DrawableDescriptor)
通过图片数据源获取图片,用于后续渲染展示。
......@@ -30,15 +30,15 @@ Image组件加载图片失败或图片尺寸为0时,图片组件大小自动
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---- | ---------------------------------------- | ---- | ---------------------------------------- |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源,支持本地图片和网络图片,引用方式请参考[加载图片资源](../ui/arkts-graphics-display.md#加载图片资源)<br>1. string格式可用于加载网络图片和本地图片,常用于加载网络图片。当使用相对路径引用本地图片时,例如Image("common/test.jpg"),不支持跨包/跨模块调用该Image组件,建议使用Resource格式来管理需全局使用的图片资源。<br>- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br>- 支持file://路径前缀的字符串。用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。<br>2. PixelMap格式为像素图,常用于图片编辑的场景。<br>3. Resource格式可以跨包/跨模块访问资源文件,是访问本地图片的推荐方式<br>**说明:**<br/>- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。<br/>- ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。<br/>- ArkTS卡片上不支持&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)类型。 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | [PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[ResourceStr](ts-types.md#resourcestr)\|&nbsp;[DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | 是 | 图片的数据源,支持本地图片和网络图片,引用方式请参考[加载图片资源](../ui/arkts-graphics-display.md#加载图片资源)<br>1. PixelMap格式为像素图,常用于图片编辑的场景。<br>2. ResourceStr包含Resource和string格式。<br>string格式可用于加载网络图片和本地图片,常用于加载网络图片。当使用相对路径引用本地图片时,例如Image("common/test.jpg"),不支持跨包/跨模块调用该Image组件,建议使用Resource格式来管理需全局使用的图片资源。<br>- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br>- 支持file://路径前缀的字符串。用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。<br>Resource格式可以跨包/跨模块访问资源文件,是访问本地图片的推荐方式。<br/>3. 当传入资源id或name为普通图片时,生成DrawableDescriptor对象<br>**说明:**<br/>- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。<br/>- ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。<br/>- ArkTS卡片上不支持&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)类型。 |
## 属性
属性的详细使用指导请参考[添加属性](../../ui/arkts-graphics-display.md#添加属性)。除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| -------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
| alt | string \| [Resource](ts-types.md#resource类型) | 加载时显示的占位图,支持本地图片(png、jpg、bmp、svg和gif类型),不支持网络图片。<br>默认值:null<br>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。<br/>默认值:ImageFit.Cover<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。从中心点向两边重复,剩余空间不足放下一张图片时会截断。<br/>默认值:ImageRepeat.NoRepeat<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>svg类型图源不支持该属性。 |
......@@ -52,7 +52,7 @@ Image组件加载图片失败或图片尺寸为0时,图片组件大小自动
| syncLoad<sup>8+</sup> | boolean | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br>**说明:**<br>建议加载尺寸较小的本地图片时将syncLoad设为true,因为耗时较短,在主线程上执行即可。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制。<br>当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br>默认值:CopyOptions.None<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br>**说明:**<br>svg图片不支持复制。 |
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果,入参为一个的4x5的RGBA转换矩阵。<br/>矩阵第一行表示R(红色)的向量值,第二行表示G(绿色)的向量值,第三行表示B(蓝色)的向量值,第四行表示A(透明度)的向量值,4行分别代表不同的RGBA的向量值。<br>RGBA值分别是0和1之间的浮点数字,当矩阵对角线值为1时,保持图片原有色彩。<br> **计算规则:**<br>如果输入的滤镜矩阵为:<br>![image-matrix-1](figures/image-matrix-1.jpg)<br>像素点为[R, G, B, A]<br>则过滤后的颜色为 [R’, G’, B’, A’]<br>![image-matrix-2](figures/image-matrix-2.jpg)<br>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| draggable<sup>9+</sup> | boolean | 设置组件默认拖拽效果,设置为true时,组件可拖拽。<br>不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。<br/>默认值:false |
| draggable<sup>(deprecated)</sup> | boolean | 设置组件默认拖拽效果,设置为true时,组件可拖拽。<br>不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。<br/>默认值:false<br>**说明:**<br />从 API version 9 开始支持,从 API version 10 开始废弃,建议使用通用属性[draggable](ts-universal-events-drag-drop.md)替代。 |
> **说明:**
>
......@@ -64,7 +64,7 @@ Image组件加载图片失败或图片尺寸为0时,图片组件大小自动
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | -------------------------- |
| ------ | ---------------------------------------------------- |
| None | 不使用图片插值。 |
| High | 高图片插值,插值质量最高,可能会影响图片渲染的速度。 |
| Medium | 中图片插值。 |
......@@ -75,7 +75,7 @@ Image组件加载图片失败或图片尺寸为0时,图片组件大小自动
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | ------- |
| -------- | -------------- |
| Original | 原色渲染模式。 |
| Template | 黑白渲染模式。 |
......@@ -85,7 +85,7 @@ Image组件加载图片失败或图片尺寸为0时,图片组件大小自动
### onComplete
onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) =&gt; void)
onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number,contentWidth: number, contentHeight: number, contentOffsetX: number, contentOffsetY: number}) =&gt; void) }) =&gt; void)
图片数据加载成功和解码成功时均触发该回调,返回成功加载的图片尺寸。
......@@ -94,12 +94,16 @@ onComplete(callback: (event?: { width: number, height: number, componentWidth: n
**参数:**
| 参数名 | 类型 | 说明 |
| --------------- | ------ | ---------------------------------------- |
| ---------------------------- | ------ | ------------------------------------------------------------ |
| width | number | 图片的宽。<br/>单位:像素 |
| height | number | 图片的高。<br/>单位:像素 |
| componentWidth | number | 组件的宽。<br/>单位:像素 |
| componentHeight | number | 组件的高。<br/>单位:像素 |
| loadingStatus | number | 图片加载成功的状态值。<br/>**说明:**<br/>返回的状态值为0时,表示图片数据加载成功。返回的状态值为1时,表示图片解码成功。 |
| contentWidth<sup>10+</sup> | number | 图片实际绘制的宽度。<br/>单位:像素<br>**说明:**仅在loadingStatus返回1时有效。 |
| contentHeight<sup>10+</sup> | number | 图片实际绘制的高度。<br/>单位:像素<br/>**说明:**仅在loadingStatus返回1时有效。 |
| contentOffsetX<sup>10+</sup> | number | 实际绘制内容相对于组件自身的x轴偏移。<br/>单位:像素<br/>**说明:**仅在loadingStatus返回1时有效。 |
| contentOffsetY<sup>10+</sup> | number | 实际绘制内容相对于组件自身的y轴偏移。<br/>单位:像素<br/>**说明:**仅在loadingStatus返回1时有效。 |
### onError
......@@ -113,7 +117,7 @@ onError(callback: (event?: { componentWidth: number, componentHeight: number , m
**参数:**
| 参数名 | 类型 | 说明 |
| -------------------- | ------ | --------------- |
| -------------------- | ------ | ------------------------- |
| componentWidth | number | 组件的宽。<br/>单位:像素 |
| componentHeight | number | 组件的高。<br/>单位:像素 |
| message<sup>9+</sup> | string | 报错信息。 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册