提交 4545e504 编写于 作者: Y yamila

update image

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 b6319e19
......@@ -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
......@@ -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
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册