diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0000001219864133.PNG b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0000001219864133.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..eababe89d532f5e3f2bdd2e8d6449782054dc348
Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0000001219864133.PNG differ
diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0000001219864133.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0000001219864133.gif
deleted file mode 100644
index 0befd736af77db15c203c4a5578929baf1d83e08..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0000001219864133.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/apis/js-apis-matrix4.md b/zh-cn/application-dev/reference/apis/js-apis-matrix4.md
index 5f07667259c42a4651a409ba78dab990d13fe388..22b462913cc48c25e949d417de9d1b2f0c1d7fd5 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-matrix4.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-matrix4.md
@@ -436,22 +436,35 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个
```ts
// xxx.ets
import matrix4 from '@ohos.matrix4'
-import prompt from '@system.prompt'
@Entry
@Component
struct Test {
- private matrix1 = matrix4.identity().transformPoint([100, 10])
-
+ private originPoint: [number, number] = [50, 50]
+ private matrix_1 = matrix4.identity().translate({ x: 150, y: -50 })
+ private transformPoint = this.matrix_1.transformPoint(this.originPoint)
+ private matrix_2 = matrix4.identity().translate({ x: this.transformPoint[0], y: this.transformPoint[1] })
+
build() {
Column() {
- Button("get Point")
- .onClick(() => {
- prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
- }).backgroundColor(0x2788D9)
+ Text(`矩阵变换前的坐标：[${this.originPoint}]`)
+ .fontSize(16)
+ Image($r("app.media.image"))
+ .width('600px')
+ .height('300px')
+ .margin({ top: 50 })
+ Text(`矩阵变换前的坐标：[${this.transformPoint}]`)
+ .fontSize(16)
+ .margin({ top: 100 })
+ Image($r("app.media.image"))
+ .width('600px')
+ .height('300px')
+ .margin({ top: 50 })
+ .transform(this.matrix_2)
}.width("100%").padding(50)
}
}
```
-
\ No newline at end of file
+
+
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 f1f1e9f83722073c8a7729d204ce10f521fbbf98..bfebb81d8ccb8ae8f3a6bf538e9153cfc95076f1 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
@@ -74,11 +74,11 @@ Image(src: string | PixelMap | Resource)
除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
-| 名称 | 功能描述 |
-| ---------------------------------------- | ---------------------------------------- |
+| 名称 | 功能描述 |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | 图片成功加载时触发该回调，返回成功加载的图片尺寸。
- width：图片的宽，单位为像素。
- height：图片的高，单位为像素。
- componentWidth：组件的宽，单位为像素。
- componentHeight：组件的高，单位为像素。
- loadingStatus：图片加载成功的状态。
|
-| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | 图片加载出现异常时触发该回调。
- componentWidth：组件的宽，单位为像素。
- componentHeight：组件的高，单位为像素。
|
-| onFinish(event: () => void) | 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。 |
+| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | 图片加载出现异常时触发该回调。
- componentWidth：组件的宽，单位为像素。
- componentHeight：组件的高，单位为像素。 |
+| onFinish(event: () => void) | 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。 |
## 示例
@@ -160,8 +160,8 @@ struct ImageExample1 {
```tsx
// @ts-nocheck
-import http from '@ohos.net.http';
-import ResponseCode from '@ohos.net.http';
+import http from '@ohos.net.http'
+import ResponseCode from '@ohos.net.http'
import image from '@ohos.multimedia.image'
@@ -176,7 +176,7 @@ struct Index {
Column({space: 10}) {
Button("获取网络图片")
.onClick(() => {
- this.httpRequest();
+ this.httpRequest()
})
Image(this.image).height(100).width(100)
}
@@ -187,7 +187,7 @@ struct Index {
// 网络图片请求方法
private httpRequest() {
- let httpRequest = http.createHttp();
+ let httpRequest = http.createHttp()
httpRequest.request(
"https://www.example.com/xxx.png", // 请填写一个具体的网络图片地址
@@ -207,7 +207,7 @@ struct Index {
this.image = pixelMap
})
} else {
- console.log("response code: " + code);
+ console.log("response code: " + code)
}
}
}
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
index ceac355dcd2597840c09d256a39670e3bafb87f5..688b4351e1aff824c62a91fe763451eb62b2b6af 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
@@ -6,7 +6,7 @@
- 容器: [Flex组件](../reference/arkui-ts/ts-container-flex.md)作为Flex布局的容器，用于设置布局相关属性。
- 子组件: Flex组件内的子组件自动成为布局的子组件。
- 主轴: Flex组件布局方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。
-- 交叉轴: 垂直于主轴方向的轴线。交叉轴起始的位置称为主轴首部，结束位置称为交叉轴尾部。
+- 交叉轴: 垂直于主轴方向的轴线。交叉轴起始的位置称为交叉轴首部，结束位置称为交叉轴尾部。
以FlexDirection.Row的Flex为例：