Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“ab7eb7b48bafea75786418bbbb50acddd51e7c81”上不存在“...3.python/git@gitcode.net:csdn/skill_tree_dailycode.git”
提交 a0d1b104 编写于 作者: Y yamila
浏览文件
操作

update scroll 

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 bd4b5132
显示空白变更内容
内联 并排
Showing with 473 addition and 423 deletion
zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md
浏览文件 @ a0d1b104
...@@ -468,6 +468,11 @@ struct CompC { ...@@ -468,6 +468,11 @@ struct CompC {
装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。 装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。
> **说明：**
>
> 深层次数据修改不会触发@Watch回调，例如无法监听数组中对象值的改变。
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ a0d1b104
...@@ -64,74 +64,77 @@ ...@@ -64,74 +64,77 @@
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="tutorial-page">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" <div class="mymarquee">
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee> <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
<div class="content"> id="testmarquee" onfinish="setfinish">
<button class="controlButton" onclick="onStartClick">Start</button> Life is a journey, not the destination.
<button class="controlButton" onclick="onStopClick">Stop</button> </marquee>
</div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
<button onclick="makestart" value="start"></button>
<button onclick="makestop" value="stop"></button>
</div> </div>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .tutorial-page {
width: 750px;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
background-color: #ffffff; justify-content: center;
} }
.customMarquee { .marqueetext {
width: 100%; font-size: 37px;
height: 80px;
padding: 10px;
margin: 20px;
border: 4px solid #ff8888;
border-radius: 20px;
font-size: 40px;
color: #ff8888;
font-weight: bolder;
font-family: serif;
background-color: #ffdddd;
} }
.content { .mymarquee {
flex-direction: row; margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
} }
.controlButton { button{
flex-grow: 1; width: 200px;
background-color: #F2F2F2; height: 80px;
text-color: #0D81F2; margin-top: 100px;
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
data: { private: {
scrollAmount: 30, loopval: 1,
loop: 3, scroll: 8,
marqueeDir: 'left', color1: 'red'
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
}, },
onMarqueeStart: function() { onInit(){
console.log("onMarqueeStart");
}, },
onMarqueeFinish: function() { setfinish(e) {
console.log("onMarqueeFinish"); this.loopval= this.loopval + 1,
this.r = Math.floor(Math.random()*255),
this.g = Math.floor(Math.random()*255),
this.b = Math.floor(Math.random()*255),
this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
this.$element('testmarquee').start(),
this.loopval= this.loopval - 1
}, },
onStartClick (evt) { makestart(e) {
this.$element('customMarquee').start(); this.$element('testmarquee').start()
}, },
onStopClick (evt) { makestop(e) {
this.$element('customMarquee').stop(); this.$element('testmarquee').stop()
} }
} }
``` ```
![zh-cn_image_0000001127284934](figures/zh-cn_image_0000001127284934.gif) ![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ a0d1b104
...@@ -170,19 +170,24 @@ ...@@ -170,19 +170,24 @@
{{ item }} {{ item }}
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
oncancel="textoncancel" class="pickertext"></picker> onchange="textonchange"
oncancel="textoncancel" class="pickertext" show="false"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true" <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12" <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
selected="{{ timeselect }}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker> onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true" <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker> onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}" <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div> </div>
``` ```
...@@ -194,16 +199,18 @@ ...@@ -194,16 +199,18 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
picker{
width:60%; picker {
height:80px; width: 60%;
border-radius:20px; height: 80px;
text-color:white; border-radius: 20px;
font-size:15px; text-color: white;
background-color:#4747e3; font-size: 15px;
margin-left:20%; background-color: #4747e3;
margin-left: 20%;
} }
select{
select {
background-color: #efecec; background-color: #efecec;
height: 50px; height: 50px;
width: 60%; width: 60%;
...@@ -218,68 +225,92 @@ ...@@ -218,68 +225,92 @@
// xxx.js // xxx.js
import router from '@system.router'; import router from '@system.router';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
selectList:["text","data","time","datetime","multitext"], selectList: ["text", "data", "time", "datetime", "multitext"],
rangetext:['15', "20", "25"], rangetext: ['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue', textvalue: 'default textvalue',
datevalue:'default datevalue', datevalue: 'default datevalue',
timevalue:'default timevalue', timevalue: 'default timevalue',
datetimevalue:'default datetimevalue', datetimevalue: 'default datetimevalue',
multitextvalue:'default multitextvalue', multitextvalue: 'default multitextvalue',
containsecond:true, containsecond: true,
multitextselect:[1,2,0], multitextselect: [1, 2, 0],
datetimeselect:'2012-5-6-11-25', datetimeselect: '2012-5-6-11-25',
timeselect:'11:22:30', timeselect: '11:22:30',
dateselect:'2021-3-2', dateselect: '2021-3-2',
textselect:'2' textselect: '2'
}, },
selectChange(e){ selectChange(e) {
for(let i = 0;i<this.selectList.length;i++){ for (let i = 0;i < this.selectList.length; i++) {
if(e.newValue == this.selectList[i]){ if (e.newValue == this.selectList[i]) {
this.$element("picker"+i).show(); this.$element("picker" + i).show();
} }
} }
}, },
textonchange(e) { textonchange(e) {
this.textvalue = e.newValue; this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) prompt.showToast({
message: "text:" + e.newValue + ",newSelected:" + e.newSelected
})
}, },
textoncancel(e) { textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" }) prompt.showToast({
message: "text: textoncancel"
})
}, },
dateonchange(e) { dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day; this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day }) prompt.showToast({
message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
})
}, },
dateoncancel() { dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" }) prompt.showToast({
message: "date: dateoncancel"
})
}, },
timeonchange(e) { timeonchange(e) {
if(this.containsecond){ if (this.containsecond) {
this.timevalue=e.hour+":"+e.minute+":"+e.second; this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second }) prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
})
} else { } else {
this.timevalue=e.hour+":"+e.minute; this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute }) prompt.showToast({
}}, message: "Time:" + e.hour + ":" + e.minute
})
}
},
timeoncancel() { timeoncancel() {
prompt.showToast({ message:"timeoncancel" }) prompt.showToast({
message: "timeoncancel"
})
}, },
datetimeonchange(e) { datetimeonchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute }) prompt.showToast({
message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
})
}, },
datetimeoncancel() { datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" }) prompt.showToast({
message: "datetimeoncancel"
})
}, },
multitextonchange(e) { multitextonchange(e) {
this.multitextvalue=e.newValue; this.multitextvalue = e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue }) prompt.showToast({
message: "Multi-column text change" + e.newValue
})
}, },
multitextoncancel() { multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" }) prompt.showToast({
message: "multitextoncancel"
})
}, },
popup_picker() { popup_picker() {
this.$element("picker_text").show(); this.$element("picker_text").show();
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ a0d1b104
...@@ -118,10 +118,10 @@ export default { ...@@ -118,10 +118,10 @@ export default {
data: { data: {
todolist: [{ todolist: [{
title: '刷题', title: '刷题',
date: '2021-12-31 10:00:00', date: '2021-12-31 10:00:00'
}, { }, {
title: '看电影', title: '看电影',
date: '2021-12-31 20:00:00', date: '2021-12-31 20:00:00'
}], }],
}, },
} }
......
zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
浏览文件 @ a0d1b104
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px"> <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div"> <div class="panel-div">
<div class="inner-txt"> <div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text> <text class="txt">Simple panel in {{ modeFlag }} mode</text>
</div> </div>
<div class="inner-btn"> <div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button> <button type="capsule" value="Close" onclick="closePanel"></button>
...@@ -108,6 +108,7 @@ ...@@ -108,6 +108,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.btn-div { .btn-div {
width: 100%; width: 100%;
height: 200px; height: 200px;
...@@ -115,16 +116,19 @@ ...@@ -115,16 +116,19 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.txt { .txt {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 39px; font-size: 39px;
} }
.panel-div { .panel-div {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.inner-txt { .inner-txt {
width: 100%; width: 100%;
height: 160px; height: 160px;
...@@ -132,6 +136,7 @@ ...@@ -132,6 +136,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.inner-btn { .inner-btn {
width: 100%; width: 100%;
height: 120px; height: 120px;
......
zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ a0d1b104
...@@ -115,7 +115,7 @@ export default { ...@@ -115,7 +115,7 @@ export default {
visibilitychange(e) { visibilitychange(e) {
prompt.showToast({ prompt.showToast({
message: 'visibility change visibility: ' + e.visibility, message: 'visibility change visibility: ' + e.visibility,
duration: 3000, duration: 3000
}); });
}, },
showpopup() { showpopup() {
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
}, },
hidepopup() { hidepopup() {
this.$element("popup").hide(); this.$element("popup").hide();
}, }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ a0d1b104
...@@ -62,25 +62,25 @@ ...@@ -62,25 +62,25 @@
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class = "container"> <div class="container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick"> <stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
<stepper-item class ="stepperItem" label="{{label_1}}"> <stepper-item class="stepperItem" label="{{ label_1 }}">
<div class = "stepperItemContent" > <div class="stepperItemContent">
<text class = "text">First screen</text> <text>First screen</text>
</div> </div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item> </stepper-item>
<stepper-item class ="stepperItem" label="{{label_2}}"> <stepper-item class="stepperItem" label="{{ label_2 }}">
<div class = "stepperItemContent" > <div class="stepperItemContent">
<text class = "text">Second screen</text> <text>Second screen</text>
</div> </div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item> </stepper-item>
<stepper-item class ="stepperItem" label="{{label_3}}"> <stepper-item class="stepperItem" label="{{ label_3 }}">
<div class = "stepperItemContent" > <div class="stepperItemContent">
<text class = "text">Third screen</text> <text>Third screen</text>
</div> </div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item> </stepper-item>
</stepper> </stepper>
</div> </div>
...@@ -94,16 +94,18 @@ ...@@ -94,16 +94,18 @@
align-items: center; align-items: center;
height: 300px; height: 300px;
} }
.stepperItem { .stepperItem {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.stepperItemContent { .stepperItemContent {
color: #0000ff;
font-size: 50px; font-size: 50px;
justify-content: center; justify-content: center;
} }
.button { .button {
width: 60%; width: 60%;
margin-top: 30px; margin-top: 30px;
...@@ -132,10 +134,12 @@ export default { ...@@ -132,10 +134,12 @@ export default {
prevLabel: 'BACK', prevLabel: 'BACK',
nextLabel: 'NEXT', nextLabel: 'NEXT',
status: 'normal' status: 'normal'
}, }
}, },
setRightButton(e) { setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); this.$element('mystepper').setNextButtonStatus({
status: 'skip', label: 'SKIP'
});
}, },
nextclick(e) { nextclick(e) {
var index = { var index = {
...@@ -148,7 +152,7 @@ export default { ...@@ -148,7 +152,7 @@ export default {
pendingIndex: e.pendingIndex pendingIndex: e.pendingIndex
} }
return index; return index;
}, }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ a0d1b104
...@@ -47,7 +47,7 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance ...@@ -47,7 +47,7 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
| --------- | ------------ | ---- | ------------------------------------------------------------ | | --------- | ------------ | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 | | fingers | number | 否 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| direction | PanDirection | 否 | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：All | | direction | PanDirection | 否 | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：All |
| distance | number | 否 | 最小滑动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 | | distance | number | 否 | 最小滑动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> [Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
**接口** **接口**
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ a0d1b104
...@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean) ...@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean)
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -96,8 +96,8 @@ struct FillStyleExample { ...@@ -96,8 +96,8 @@ struct FillStyleExample {
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -126,8 +126,8 @@ struct LineWidthExample { ...@@ -126,8 +126,8 @@ struct LineWidthExample {
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -158,8 +158,8 @@ struct StrokeStyleExample { ...@@ -158,8 +158,8 @@ struct StrokeStyleExample {
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -192,8 +192,8 @@ struct LineCapExample { ...@@ -192,8 +192,8 @@ struct LineCapExample {
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -227,8 +227,8 @@ struct LineJoinExample { ...@@ -227,8 +227,8 @@ struct LineJoinExample {
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -262,8 +262,8 @@ struct MiterLimit { ...@@ -262,8 +262,8 @@ struct MiterLimit {
@Entry @Entry
@Component @Component
struct Fonts { struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -292,8 +292,8 @@ struct Fonts { ...@@ -292,8 +292,8 @@ struct Fonts {
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -306,9 +306,7 @@ struct CanvasExample { ...@@ -306,9 +306,7 @@ struct CanvasExample {
this.context.moveTo(140, 10) this.context.moveTo(140, 10)
this.context.lineTo(140, 160) this.context.lineTo(140, 160)
this.context.stroke() this.context.stroke()
this.context.font = '18px sans-serif' this.context.font = '18px sans-serif'
this.context.textAlign = 'start' this.context.textAlign = 'start'
this.context.fillText('textAlign=start', 140, 60) this.context.fillText('textAlign=start', 140, 60)
this.context.textAlign = 'end' this.context.textAlign = 'end'
...@@ -337,8 +335,8 @@ struct CanvasExample { ...@@ -337,8 +335,8 @@ struct CanvasExample {
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -351,9 +349,7 @@ struct TextBaseline { ...@@ -351,9 +349,7 @@ struct TextBaseline {
this.context.moveTo(0, 120) this.context.moveTo(0, 120)
this.context.lineTo(400, 120) this.context.lineTo(400, 120)
this.context.stroke() this.context.stroke()
this.context.font = '20px sans-serif' this.context.font = '20px sans-serif'
this.context.textBaseline = 'top' this.context.textBaseline = 'top'
this.context.fillText('Top', 10, 120) this.context.fillText('Top', 10, 120)
this.context.textBaseline = 'bottom' this.context.textBaseline = 'bottom'
...@@ -382,8 +378,8 @@ struct TextBaseline { ...@@ -382,8 +378,8 @@ struct TextBaseline {
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -415,8 +411,8 @@ struct GlobalAlpha { ...@@ -415,8 +411,8 @@ struct GlobalAlpha {
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -461,8 +457,8 @@ struct LineDashOffset { ...@@ -461,8 +457,8 @@ struct LineDashOffset {
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -499,8 +495,8 @@ struct GlobalCompositeOperation { ...@@ -499,8 +495,8 @@ struct GlobalCompositeOperation {
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -531,8 +527,8 @@ struct ShadowBlur { ...@@ -531,8 +527,8 @@ struct ShadowBlur {
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -563,8 +559,8 @@ struct ShadowColor { ...@@ -563,8 +559,8 @@ struct ShadowColor {
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -596,8 +592,8 @@ struct ShadowOffsetX { ...@@ -596,8 +592,8 @@ struct ShadowOffsetX {
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -628,9 +624,9 @@ struct ShadowOffsetY { ...@@ -628,9 +624,9 @@ struct ShadowOffsetY {
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -677,8 +673,8 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -677,8 +673,8 @@ fillRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -721,8 +717,8 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -721,8 +717,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -811,8 +807,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void ...@@ -811,8 +807,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -856,8 +852,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void ...@@ -856,8 +852,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -925,8 +921,8 @@ measureText(text: string): TextMetrics ...@@ -925,8 +921,8 @@ measureText(text: string): TextMetrics
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -968,8 +964,8 @@ stroke(path?: Path2D): void ...@@ -968,8 +964,8 @@ stroke(path?: Path2D): void
@Entry @Entry
@Component @Component
struct Stroke { struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1008,8 +1004,8 @@ beginPath(): void ...@@ -1008,8 +1004,8 @@ beginPath(): void
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1055,8 +1051,8 @@ moveTo(x: number, y: number): void ...@@ -1055,8 +1051,8 @@ moveTo(x: number, y: number): void
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1100,8 +1096,8 @@ lineTo(x: number, y: number): void ...@@ -1100,8 +1096,8 @@ lineTo(x: number, y: number): void
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1138,8 +1134,8 @@ closePath(): void ...@@ -1138,8 +1134,8 @@ closePath(): void
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1191,9 +1187,9 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu ...@@ -1191,9 +1187,9 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1240,8 +1236,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1240,8 +1236,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1287,8 +1283,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1287,8 +1283,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1297,10 +1293,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1297,10 +1293,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.beginPath(); this.context.beginPath()
this.context.moveTo(20, 20); this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20); this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1336,8 +1332,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1336,8 +1332,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1383,8 +1379,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1383,8 +1379,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1393,9 +1389,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1393,9 +1389,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.moveTo(100, 20); this.context.moveTo(100, 20)
this.context.arcTo(150, 20, 150, 70, 50); this.context.arcTo(150, 20, 150, 70, 50)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1433,8 +1429,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1433,8 +1429,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1479,8 +1475,8 @@ rect(x: number, y: number, w: number, h: number): void ...@@ -1479,8 +1475,8 @@ rect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1522,8 +1518,8 @@ fill(fillRule?: CanvasFillRule): void ...@@ -1522,8 +1518,8 @@ fill(fillRule?: CanvasFillRule): void
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1574,17 +1570,17 @@ struct Fill { ...@@ -1574,17 +1570,17 @@ struct Fill {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.moveTo(30, 90); region.moveTo(30, 90)
region.lineTo(110, 20); region.lineTo(110, 20)
region.lineTo(240, 130); region.lineTo(240, 130)
region.lineTo(60, 130); region.lineTo(60, 130)
region.lineTo(190, 20); region.lineTo(190, 20)
region.lineTo(270, 90); region.lineTo(270, 90)
region.closePath(); region.closePath()
// Fill path // Fill path
this.context.fillStyle = 'green'; this.context.fillStyle = 'green'
this.context.fill(region, "evenodd"); this.context.fill(region, "evenodd")
}) })
} }
.width('100%') .width('100%')
...@@ -1615,8 +1611,8 @@ clip(fillRule?: CanvasFillRule): void ...@@ -1615,8 +1611,8 @@ clip(fillRule?: CanvasFillRule): void
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1669,9 +1665,9 @@ struct Clip { ...@@ -1669,9 +1665,9 @@ struct Clip {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.rect(80,10,20,130); region.rect(80,10,20,130)
region.rect(40,50,100,50); region.rect(40,50,100,50)
this.context.clip(region,"evenodd") this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)" this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height) this.context.fillRect(0, 0, this.context.width, this.context.height)
...@@ -1739,8 +1735,8 @@ rotate(angle: number): void ...@@ -1739,8 +1735,8 @@ rotate(angle: number): void
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1782,8 +1778,8 @@ scale(x: number, y: number): void ...@@ -1782,8 +1778,8 @@ scale(x: number, y: number): void
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1838,8 +1834,8 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1838,8 +1834,8 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1891,8 +1887,8 @@ setTransform方法使用的参数和transform()方法相同，但setTransform() ...@@ -1891,8 +1887,8 @@ setTransform方法使用的参数和transform()方法相同，但setTransform()
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1942,8 +1938,8 @@ translate(x: number, y: number): void ...@@ -1942,8 +1938,8 @@ translate(x: number, y: number): void
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1998,8 +1994,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: ...@@ -1998,8 +1994,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() { build() {
...@@ -2102,8 +2098,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2102,8 +2098,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
...@@ -2113,9 +2109,9 @@ struct GetImageData { ...@@ -2113,9 +2109,9 @@ struct GetImageData {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130); this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130); var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150); this.context.putImageData(imagedata,150,150)
}) })
} }
.width('100%') .width('100%')
...@@ -2154,8 +2150,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty ...@@ -2154,8 +2150,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2382,7 +2378,7 @@ struct ToDataURL { ...@@ -2382,7 +2378,7 @@ struct ToDataURL {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.context.toDataURL(); var dataURL = this.context.toDataURL()
}) })
} }
.width('100%') .width('100%')
...@@ -2405,8 +2401,8 @@ restore(): void ...@@ -2405,8 +2401,8 @@ restore(): void
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2415,11 +2411,11 @@ restore(): void ...@@ -2415,11 +2411,11 @@ restore(): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2443,8 +2439,8 @@ save(): void ...@@ -2443,8 +2439,8 @@ save(): void
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2453,11 +2449,11 @@ save(): void ...@@ -2453,11 +2449,11 @@ save(): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2490,8 +2486,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2490,8 +2486,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2541,8 +2537,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2541,8 +2537,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ a0d1b104
...@@ -17,19 +17,19 @@ addColorStop(offset: number, color: string): void ...@@ -17,19 +17,19 @@ addColorStop(offset: number, color: string): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | '#ffffff' | 设置渐变的颜色。 | | color | string | 是 | '#ffffff' | 设置渐变的颜色。 |
**示例：** **示例：**
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Page45 { struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
...@@ -39,8 +39,8 @@ addColorStop(offset: number, color: string): void ...@@ -39,8 +39,8 @@ addColorStop(offset: number, color: string): void
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() => {
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
...@@ -50,7 +50,8 @@ addColorStop(offset: number, color: string): void ...@@ -50,7 +50,8 @@ addColorStop(offset: number, color: string): void
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
}} }
}
``` ```
![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png) ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ a0d1b104
...@@ -245,8 +245,11 @@ struct NestedScroll { ...@@ -245,8 +245,11 @@ struct NestedScroll {
Text("Scroll Area") Text("Scroll Area")
.width("100%").height("40%").backgroundColor(0X330000FF) .width("100%").height("40%").backgroundColor(0X330000FF)
.fontSize(16).textAlign(TextAlign.Center) .fontSize(16).textAlign(TextAlign.Center)
.onClick(() => {
this.scroller.scrollToIndex(5)
})
List({ space: 20 }) { List({ space: 20, scroller: this.scroller }) {
ForEach(this.arr, (item) => { ForEach(this.arr, (item) => {
ListItem() { ListItem() {
Text("ListItem" + item) Text("ListItem" + item)
...@@ -255,7 +258,9 @@ struct NestedScroll { ...@@ -255,7 +258,9 @@ struct NestedScroll {
}.width("100%").height(100) }.width("100%").height(100)
}, item => item) }, item => item)
} }
.width("100%").height("50%").edgeEffect(EdgeEffect.None) .width("100%")
.height("50%")
.edgeEffect(EdgeEffect.None)
.onReachStart(() => { .onReachStart(() => {
this.listPosition = 0; this.listPosition = 0;
}) })
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ a0d1b104
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 默认包括组件新增和删除。<br/>默认值：TransitionType.All<br/>**说明：**<br/>不指定Type时说明插入删除使用同一种效果。 | | type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 默认包括组件新增和删除。<br/>默认值：TransitionType.All<br/>**说明：**<br/>不指定Type时说明插入删除使用同一种效果。 |
| opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。<br/>默认值：1 | | opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。<br/>默认值：1 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。<br/>-x：横向的平移距离。<br/>-y：纵向的平移距离。<br/>-z：竖向的平移距离。 | | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。<br/>-x：横向的平移距离。<br/>-y：纵向的平移距离。<br/>-z：竖向的平移距离。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：竖向放大倍数（或缩小比例）。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时，默认的是组件的左上角。<br/> | | scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：竖向放大倍数（或缩小比例）。<br/>-&nbsp;centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"。<br/>-&nbsp;中心点为0时，默认的是组件的左上角。<br/> |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量。<br/>-y：纵向的旋转向量。<br/>-z：竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点。<br/>-&nbsp;中心点为（0，0）时，默认的是组件的左上角。 | | rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerX?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量。<br/>-y：纵向的旋转向量。<br/>-z：竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点，centerX和centerY默认值是"50%"。<br/>-&nbsp;中心点为（0，0）时，默认的是组件的左上角。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ a0d1b104
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
@Entry @Entry
@Component @Component
struct Index { struct Index {
@State outSetValue: number = 40; @State outSetValue: number = 40
build() { build() {
Row() { Row() {
...@@ -85,7 +85,7 @@ struct Index { ...@@ -85,7 +85,7 @@ struct Index {
build() { build() {
Row() { Row() {
Column() { Column() {
Text('This is gradient color.').textAlign(TextAlign.Center) Text('This is gradient color.').textAlign(TextAlign.Center).width(68)
.borderImage({ .borderImage({
source: { source: {
angle: 90, angle: 90,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或