diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif index 3dfbd730c80b91d5dcb0583fad6af2c6895febfd..3d20649fb216bdf03020adbd8d6dae36025fe26a 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif differ 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 6e7e9b6a3479a82153c71e8bb28879bb2fc52dfa..d2b52f673fae661ddb5ab30561c0d733f514b99f 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 @@ -35,22 +35,22 @@ Image(src: PixelMap | ResourceStr | DrawableDescriptor) 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ------------------------ | ---------------------------------------- | ---------------------------------------- | -| alt | string \| [Resource](ts-types.md#resource类型) | 加载时显示的占位图，支持本地图片。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。
默认值：ImageFit.Cover
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。
默认值：ImageRepeat.NoRepeat
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
svg类型图源不支持该属性。 | -| interpolation | [ImageInterpolation](#imageinterpolation) | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
默认值：ImageInterpolation.None
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
svg类型图源不支持该属性。
PixelMap资源不支持该属性。 | -| renderMode | [ImageRenderMode](#imagerendermode) | 设置图片渲染的模式。
默认值：ImageRenderMode.Original
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
svg类型图源不支持该属性。 | -| sourceSize | {
width: number,
height: number
} | 设置图片裁剪尺寸，将原始图片解码成pixelMap，指定尺寸的图片，单位为px。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
PixelMap资源和SVG图片不支持该属性。 | -| matchTextDirection | boolean | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| fitOriginalSize | boolean | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效，设置后会替换svg图片的fill颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| autoResize | boolean | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。
默认值：true
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| syncLoad8+ | boolean | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制（SVG图片不支持复制）。
当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。
默认值：CopyOptions.None
该接口支持在ArkTS卡片中使用。 | -| colorFilter9+ | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。
该接口支持在ArkTS卡片中使用。 | -| draggable(deprecated) | boolean | 设置默认拖拽效果。（不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。）
默认值：false
该接口支持在ArkTS卡片中使用。
**说明：**
从 API version 9 开始支持，从 API version 10 开始废弃，建议使用通用属性[draggable](ts-universal-events-drag-drop.md)替代。 | +| 名称 | 参数类型 | 描述 | +| -------------------------------- | ---------------------------------------- | ---------------------------------------- | +| alt | string \| [Resource](ts-types.md#resource类型) | 加载时显示的占位图，支持本地图片。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。
默认值：ImageFit.Cover
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。
默认值：ImageRepeat.NoRepeat
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
svg类型图源不支持该属性。 | +| interpolation | [ImageInterpolation](#imageinterpolation) | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
默认值：ImageInterpolation.None
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
svg类型图源不支持该属性。
PixelMap资源不支持该属性。 | +| renderMode | [ImageRenderMode](#imagerendermode) | 设置图片渲染的模式。
默认值：ImageRenderMode.Original
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
svg类型图源不支持该属性。 | +| sourceSize | {
width: number,
height: number
} | 设置图片裁剪尺寸，将原始图片解码成pixelMap，指定尺寸的图片，单位为px。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
PixelMap资源和SVG图片不支持该属性。 | +| matchTextDirection | boolean | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| fitOriginalSize | boolean | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效，设置后会替换svg图片的fill颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| autoResize | boolean | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。
默认值：true
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| syncLoad8+ | boolean | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制（SVG图片不支持复制）。
当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。
默认值：CopyOptions.None
该接口支持在ArkTS卡片中使用。 | +| colorFilter9+ | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。
该接口支持在ArkTS卡片中使用。 | +| draggable(deprecated) | boolean | 设置默认拖拽效果。（不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。）
默认值：false
该接口支持在ArkTS卡片中使用。
**说明：**
从 API version 9 开始支持，从 API version 10 开始废弃，建议使用通用属性[draggable](ts-universal-events-drag-drop.md)替代。 | > **说明：** > @@ -97,61 +97,27 @@ Image(src: PixelMap | ResourceStr | DrawableDescriptor) @Entry @Component struct ImageExample1 { - private on: string = 'www.example.com' - @State src: string = this.on - build() { Column() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { - Text('default').fontSize(16).fontColor(0xcccccc).height(30) Row({ space: 5 }) { - Image($r('app.media.ic_png')) + Image($r('app.media.example_png')) .width(110).height(110).border({ width: 1 }) .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.ic_gif')) + Image($r('app.media.example_gif')) .width(110).height(110).border({ width: 1 }) .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.ic_svg')) - .width(110).height(110).border({ width: 1 }) - .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } + Row({ space: 5 }) { - Image($r('app.media.img_example')) + Image($r('app.media.example_svg')) .width(110).height(110).border({ width: 1 }) - .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image(this.src) + .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.example_jpg')) .width(110).height(110).border({ width: 1 }) - .overlay('network', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) }.margin({ top: 25, bottom: 10 }) } - - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { - Text('objectFit').fontSize(16).fontColor(0xcccccc).height(30) - Row({ space: 5 }) { - Image($r('app.media.img_example')) - .border({ width: 1 }) - .objectFit(ImageFit.None).width(110).height(110) - .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.img_example')) - .border({ width: 1 }) - .objectFit(ImageFit.Fill).width(110).height(110) - .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.img_example')) - .border({ width: 1 }) - .objectFit(ImageFit.Cover).width(110).height(110) - .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - } - Row({ space: 5 }) { - Image($r('app.media.img_example_w250')) - .border({ width: 1 }) - .objectFit(ImageFit.Contain).width(110).height(110) - .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.img_example_w250')) - .border({ width: 1 }) - .objectFit(ImageFit.ScaleDown).width(110).height(110) - .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - }.margin({ top: 25 }) - } }.height(320).width(360).padding({ right: 10, top: 10 }) } }