!12499 修改矩阵变换示例

Merge pull request !12499 from 田雨/master

zh-cn/application-dev/reference/apis/js-apis-matrix4.md

@@ -436,22 +436,34 @@ 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)
   }
 }
 ```
 
-![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif)
\ No newline at end of file
+![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.PNG)
\ No newline at end of file

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:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调，返回成功加载的图片尺寸。<br>- width：图片的宽，单位为像素。<br/>- height：图片的高，单位为像素。<br/>- componentWidth：组件的宽，单位为像素。<br/>- componentHeight：组件的高，单位为像素。<br/>- loadingStatus：图片加载成功的状态。<br/> |
-| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;, message<sup>9+</sup>: string })&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth：组件的宽，单位为像素。<br/>- componentHeight：组件的高，单位为像素。<br/> |
-| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。 |
+| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;, message<sup>9+</sup>: string })&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth：组件的宽，单位为像素。<br/>- componentHeight：组件的高，单位为像素。 |
+| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void)                | 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。 |
 
 ## 示例
 
@@ -161,7 +161,7 @@ struct ImageExample1 {
 ```tsx
 // @ts-nocheck
 import http from '@ohos.net.http';
-import ResponseCode 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)
           }
         }
       }
@@ -354,7 +354,7 @@ struct ImageExample3 {
 
 ```ts
 import fileio from '@ohos.fileio'
-import fs from '@ohos.file.fs';
+import fs from '@ohos.file.fs'
 import context from '@ohos.application.context'
 
 @Entry