Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 f2be2803 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 ced88297
显示空白变更内容
内联 并排
Showing with 37 addition and 61 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ f2be2803
...@@ -30,7 +30,7 @@ Image组件加载图片失败或图片尺寸为0时，图片组件大小自动 ...@@ -30,7 +30,7 @@ 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 | 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)类型。 |
## 属性 ## 属性
...@@ -38,7 +38,7 @@ Image组件加载图片失败或图片尺寸为0时，图片组件大小自动 ...@@ -38,7 +38,7 @@ Image组件加载图片失败或图片尺寸为0时，图片组件大小自动
属性的详细使用指导请参考[添加属性](../../ui/arkts-graphics-display.md#添加属性)。除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 属性的详细使用指导请参考[添加属性](../../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卡片中使用。 | | 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卡片中使用。 | | 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类型图源不支持该属性。 | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。从中心点向两边重复，剩余空间不足放下一张图片时会截断。<br/>默认值：ImageRepeat.NoRepeat<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>svg类型图源不支持该属性。 |
...@@ -51,33 +51,9 @@ Image组件加载图片失败或图片尺寸为0时，图片组件大小自动 ...@@ -51,33 +51,9 @@ Image组件加载图片失败或图片尺寸为0时，图片组件大小自动
| autoResize | boolean | 设置图片解码过程中是否对图源自动缩放。设置为true时，组件会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。如原图大小为1920x1080，而显示区域大小为200x200，则图片会自动解码到200x200的尺寸，大幅度节省图片占用的内存。<br/>默认值：true<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | | autoResize | boolean | 设置图片解码过程中是否对图源自动缩放。设置为true时，组件会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。如原图大小为1920x1080，而显示区域大小为200x200，则图片会自动解码到200x200的尺寸，大幅度节省图片占用的内存。<br/>默认值：true<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| syncLoad<sup>8+</sup> | boolean | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。<br/>默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br>**说明：**<br>建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可。 | | 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图片不支持复制。 | | 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>从API version 9开始，该接口支持在ArkTS卡片中使用。 | | 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>9+</sup> | boolean | 设置组件默认拖拽效果，设置为true时，组件可拖拽。<br>不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。<br/>默认值：false |
计算规则：
如果输入的滤镜矩阵为：
```
[ r_1, r_2, r_3, r_4, r_5,
g_1, g_2, g_3, g_4, g_5,
b_1, b_2, b_3, b_4, b_5,
a_1, a_2, a_3, a_4, a_5 ]
```
像素点为[R, G, B, A]
则过滤后的颜色为 [R’, G’, B’, A’]
```
R’ = r_1*R + r_2*G + r_3*B + r_4*A + r_5
G’ = g_1*R + g_2*G + g_3*B + g_4*A + g_5
B’ = b_1*R + b_2*G + b_3*B + b_4*A + b_5
A’ = a_1*R + a_2*G + a_3*B + a_4*A + a_5
```
> **说明：** > **说明：**
> >
> - 使用快捷组合键对Image组件复制时，Image组件必须处于[获焦状态](../../ui/arkts-common-events-focus-event.md#设置组件是否获焦)。Image组件默认不获焦，需将[focusable](ts-universal-attributes-focus.md)属性设置为true，即可使用TAB键将焦点切换到组件上，再将[focusOnTouch](ts-universal-attributes-focus.md)属性设置为true，即可实现点击获焦。 > - 使用快捷组合键对Image组件复制时，Image组件必须处于[获焦状态](../../ui/arkts-common-events-focus-event.md#设置组件是否获焦)。Image组件默认不获焦，需将[focusable](ts-universal-attributes-focus.md)属性设置为true，即可使用TAB键将焦点切换到组件上，再将[focusOnTouch](ts-universal-attributes-focus.md)属性设置为true，即可实现点击获焦。
...@@ -88,7 +64,7 @@ A’ = a_1*R + a_2*G + a_3*B + a_4*A + a_5 ...@@ -88,7 +64,7 @@ A’ = a_1*R + a_2*G + a_3*B + a_4*A + a_5
从API version 9开始，该接口支持在ArkTS卡片中使用。 从API version 9开始，该接口支持在ArkTS卡片中使用。
| 名称 | 描述 | | 名称 | 描述 |
| ------ | ---------------------------------------------------- | | ------ | -------------------------- |
| None | 不使用图片插值。 | | None | 不使用图片插值。 |
| High | 高图片插值，插值质量最高，可能会影响图片渲染的速度。 | | High | 高图片插值，插值质量最高，可能会影响图片渲染的速度。 |
| Medium | 中图片插值。 | | Medium | 中图片插值。 |
...@@ -99,7 +75,7 @@ A’ = a_1*R + a_2*G + a_3*B + a_4*A + a_5 ...@@ -99,7 +75,7 @@ A’ = a_1*R + a_2*G + a_3*B + a_4*A + a_5
从API version 9开始，该接口支持在ArkTS卡片中使用。 从API version 9开始，该接口支持在ArkTS卡片中使用。
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------------- | | -------- | ------- |
| Original | 原色渲染模式。 | | Original | 原色渲染模式。 |
| Template | 黑白渲染模式。 | | Template | 黑白渲染模式。 |
...@@ -118,7 +94,7 @@ onComplete(callback: (event?: { width: number, height: number, componentWidth: n ...@@ -118,7 +94,7 @@ onComplete(callback: (event?: { width: number, height: number, componentWidth: n
**参数：** **参数：**
| 参数名 | 类型 | 说明 | | 参数名 | 类型 | 说明 |
| -------- | -------- | -------- | | --------------- | ------ | ---------------------------------------- |
| width | number | 图片的宽。<br/>单位：像素 | | width | number | 图片的宽。<br/>单位：像素 |
| height | number | 图片的高。<br/>单位：像素 | | height | number | 图片的高。<br/>单位：像素 |
| componentWidth | number | 组件的宽。<br/>单位：像素 | | componentWidth | number | 组件的宽。<br/>单位：像素 |
...@@ -137,7 +113,7 @@ onError(callback: (event?: { componentWidth: number, componentHeight: number , m ...@@ -137,7 +113,7 @@ onError(callback: (event?: { componentWidth: number, componentHeight: number , m
**参数：** **参数：**
| 参数名 | 类型 | 说明 | | 参数名 | 类型 | 说明 |
| -------- | -------- | -------- | | -------------------- | ------ | --------------- |
| componentWidth | number | 组件的宽。<br/>单位：像素 | | componentWidth | number | 组件的宽。<br/>单位：像素 |
| componentHeight | number | 组件的高。<br/>单位：像素 | | componentHeight | number | 组件的高。<br/>单位：像素 |
| message<sup>9+</sup> | string | 报错信息。 | | message<sup>9+</sup> | string | 报错信息。 |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或