提交 129b7722 编写于 作者: Y yamila

update issuesI6FDEK

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 cf74f49e
......@@ -453,7 +453,7 @@ struct Test {
.width('600px')
.height('300px')
.margin({ top: 50 })
Text(`矩阵变换的坐标:[${this.transformPoint}]`)
Text(`矩阵变换的坐标:[${this.transformPoint}]`)
.fontSize(16)
.margin({ top: 100 })
Image($r("app.media.image"))
......
......@@ -138,52 +138,42 @@ button{
```js
// xxx.js
import promptAction from '@ohos.promptAction';
export default{
data:{
animation:'',
},
onInit(){
},
onShow(){
var options = {
duration: 1500,
easing: 'friction',
delay: 500,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
];
this.animation = this.$element('idName').animate(frames, options);
// handle finish event
this.animation.onfinish = function(){
promptAction.showToast({
message: "The animation is finished."
});
};
// handle cancel event
this.animation.oncancel = function(){
promptAction.showToast({
message: "The animation is canceled."
});
};
// handle repeat event
this.animation.onrepeat = function(){
promptAction.showToast({
message: "The animation is repeated."
});
};
},
start(){
this.animation.play();
},
cancel(){
this.animation.cancel();
}
export default {
data: {
animation: '',
options: {},
frames: {}
},
onInit() {
this.options = {
duration: 1500,
easing: 'friction',
delay: 500,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
this.frames = [
{
transform: {
translate: '-120px -0px'
}, opacity: 0.1, offset: 0.0
},
{
transform: {
translate: '120px 0px'
}, opacity: 1.0, offset: 1.0
}
];
},
start() {
this.animation = this.$element('idName').animate(this.frames, this.options);
this.animation.play();
},
cancel() {
this.animation.cancel();
}
}
```
......
......@@ -117,16 +117,19 @@
}
.swiperContent1{
height: 100%;
width: 100%;
justify-content: center;
background-color: #007dff;
}
.swiperContent2{
height: 100%;
width: 100%;
justify-content: center;
background-color: #ff7500;
}
.swiperContent3{
height: 100%;
width: 100%;
justify-content: center;
background-color: #41ba41;
}
......
......@@ -75,7 +75,7 @@
<div class="container">
<svg width="400" height="400">
<rect x="20" y="20" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="rx" values="0;30" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
<animate attributeName="rx" values="0;30" dur="1000" repeatCount="indefinite" fill="freeze" calcMode="linear"></animate>
</rect>
</svg>
</div>
......
......@@ -99,21 +99,21 @@ struct ImageExample1 {
Text('default').fontSize(16).fontColor(0xcccccc).height(30)
Row({ space: 5 }) {
Image($r('app.media.ic_png'))
.width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(110).height(110).border({ width: 1 })
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image($r('app.media.ic_gif'))
.width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.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 }).borderStyle(BorderStyle.Dashed)
.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'))
.width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(110).height(110).border({ width: 1 })
.overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image(this.src)
.width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(110).height(110).border({ width: 1 })
.overlay('network', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}.margin({ top: 25, bottom: 10 })
}
......@@ -122,25 +122,25 @@ struct ImageExample1 {
Text('objectFit').fontSize(16).fontColor(0xcccccc).height(30)
Row({ space: 5 }) {
Image($r('app.media.img_example'))
.border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.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 }).borderStyle(BorderStyle.Dashed)
.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 }).borderStyle(BorderStyle.Dashed)
.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 }).borderStyle(BorderStyle.Dashed)
.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 }).borderStyle(BorderStyle.Dashed)
.border({ width: 1 })
.objectFit(ImageFit.ScaleDown).width(110).height(110)
.overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}.margin({ top: 25 })
......@@ -231,18 +231,18 @@ struct ImageExample2 {
Row({ space: 50 }) {
Image($r('app.media.img_example'))
.renderMode(ImageRenderMode.Original).width(100).height(100)
.border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.border({ width: 1 })
.overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image($r('app.media.img_example'))
.renderMode(ImageRenderMode.Template).width(100).height(100)
.border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.border({ width: 1 })
.overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}
Text('alt').fontSize(12).fontColor(0xcccccc).width('96%').height(30)
Image('')
.alt($r('app.media.Image_none'))
.width(100).height(100).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(100).height(100).border({ width: 1 })
Text('sourceSize').fontSize(12).fontColor(0xcccccc).width('96%')
Row({ space: 50 }) {
......@@ -252,7 +252,7 @@ struct ImageExample2 {
height: 150
})
.objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1)
.border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.border({ width: 1 })
.overlay('w:150 h:150', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image($r('app.media.img_example'))
.sourceSize({
......@@ -260,22 +260,22 @@ struct ImageExample2 {
height: 200
})
.objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1)
.border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.border({ width: 1 })
.overlay('w:200 h:200', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}
Text('objectRepeat').fontSize(12).fontColor(0xcccccc).width('96%').height(30)
Row({ space: 5 }) {
Image($r('app.media.ic_health_heart'))
.width(120).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(120).height(125).border({ width: 1 })
.objectRepeat(ImageRepeat.XY).objectFit(ImageFit.ScaleDown)
.overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image($r('app.media.ic_health_heart'))
.width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(110).height(125).border({ width: 1 })
.objectRepeat(ImageRepeat.Y).objectFit(ImageFit.ScaleDown)
.overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
Image($r('app.media.ic_health_heart'))
.width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed)
.width(110).height(125).border({ width: 1 })
.objectRepeat(ImageRepeat.X).objectFit(ImageFit.ScaleDown)
.overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}
......
......@@ -289,3 +289,4 @@ struct WaterflowDemo {
```
![zh-cn_image_WaterFlow.gif](figures/waterflow.gif)
......@@ -65,6 +65,7 @@ struct PolygonExample {
Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green)
.stroke(Color.Transparent)
// 在 100 * 100 的矩形框中绘制一个四边形,起点(0, 0),经过(0, 100)和(100, 100),终点(100, 0)
Polygon().width(100).height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
......@@ -76,6 +77,7 @@ struct PolygonExample {
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
.stroke(Color.Transparent)
}.width('100%').margin({ top: 10 })
}
}
......
......@@ -66,6 +66,7 @@ struct RectExample {
// 绘制90% * 50矩形
Rect({ width: '90%', height: 50 })
.fill(Color.Pink)
.stroke(Color.Transparent)
// 绘制90% * 50的矩形框
Rect()
.width('90%')
......@@ -80,15 +81,18 @@ struct RectExample {
.radiusHeight(20)
.radiusWidth(40)
.fill(Color.Pink)
.stroke(Color.Transparent)
// 绘制90% * 80的矩形, 圆角宽高为20
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
.stroke(Color.Transparent)
}.width('100%').margin({ top: 10 })
// 绘制90% * 50矩形, 左上圆角宽高40,右上圆角宽高20,右下圆角宽高40,左下圆角宽高20
Rect({ width: '90%', height: 80 })
.radius([[40, 40], [20, 20], [40, 40], [20, 20]])
.fill(Color.Pink)
.stroke(Color.Transparent)
}.width('100%').margin({ top: 5 })
}
}
......
......@@ -85,7 +85,7 @@ struct Index {
build() {
Row() {
Column() {
Text('This is gradient color.').textAlign(TextAlign.Center).width(68)
Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200)
.borderImage({
source: {
angle: 90,
......
......@@ -186,7 +186,7 @@ text{
}
```
![zh-cn_image_0000001234130975](figures/zh-cn_image_0000001234130975.png)
![zh-cn_image_0000001234130975](figures/zh-cn_image_0000001234130975.PNG)
## 添加事件
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册