未验证 提交 f0cfe9ca 编写于 作者: O openharmony_ci 提交者: Gitee

!12499 修改矩阵变换示例

Merge pull request !12499 from 田雨/master
...@@ -436,22 +436,34 @@ Matrix的坐标点转换函数,可以将当前的变换效果作用到一个 ...@@ -436,22 +436,34 @@ Matrix的坐标点转换函数,可以将当前的变换效果作用到一个
```ts ```ts
// xxx.ets // xxx.ets
import matrix4 from '@ohos.matrix4' import matrix4 from '@ohos.matrix4'
import prompt from '@system.prompt'
@Entry @Entry
@Component @Component
struct Test { 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() { build() {
Column() { Column() {
Button("get Point") Text(`矩阵变换前的坐标:[${this.originPoint}]`)
.onClick(() => { .fontSize(16)
prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) Image($r("app.media.image"))
}).backgroundColor(0x2788D9) .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) }.width("100%").padding(50)
} }
} }
``` ```
![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif) ![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.PNG)
\ No newline at end of file \ No newline at end of file
...@@ -75,9 +75,9 @@ Image(src: string | PixelMap | Resource) ...@@ -75,9 +75,9 @@ Image(src: string | PixelMap | Resource)
除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件: 除支持[通用事件](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/> | | 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/> | | 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动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 | | onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例 ## 示例
...@@ -161,7 +161,7 @@ struct ImageExample1 { ...@@ -161,7 +161,7 @@ struct ImageExample1 {
```tsx ```tsx
// @ts-nocheck // @ts-nocheck
import http from '@ohos.net.http'; import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http'; import ResponseCode from '@ohos.net.http'
import image from '@ohos.multimedia.image' import image from '@ohos.multimedia.image'
...@@ -176,7 +176,7 @@ struct Index { ...@@ -176,7 +176,7 @@ struct Index {
Column({space: 10}) { Column({space: 10}) {
Button("获取网络图片") Button("获取网络图片")
.onClick(() => { .onClick(() => {
this.httpRequest(); this.httpRequest()
}) })
Image(this.image).height(100).width(100) Image(this.image).height(100).width(100)
} }
...@@ -187,7 +187,7 @@ struct Index { ...@@ -187,7 +187,7 @@ struct Index {
// 网络图片请求方法 // 网络图片请求方法
private httpRequest() { private httpRequest() {
let httpRequest = http.createHttp(); let httpRequest = http.createHttp()
httpRequest.request( httpRequest.request(
"https://www.example.com/xxx.png", // 请填写一个具体的网络图片地址 "https://www.example.com/xxx.png", // 请填写一个具体的网络图片地址
...@@ -207,7 +207,7 @@ struct Index { ...@@ -207,7 +207,7 @@ struct Index {
this.image = pixelMap this.image = pixelMap
}) })
} else { } else {
console.log("response code: " + code); console.log("response code: " + code)
} }
} }
} }
...@@ -354,7 +354,7 @@ struct ImageExample3 { ...@@ -354,7 +354,7 @@ struct ImageExample3 {
```ts ```ts
import fileio from '@ohos.fileio' import fileio from '@ohos.fileio'
import fs from '@ohos.file.fs'; import fs from '@ohos.file.fs'
import context from '@ohos.application.context' import context from '@ohos.application.context'
@Entry @Entry
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册