Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 56c86acc 编写于 作者: Y yamila
浏览文件
操作

update standard 

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 4f377ca2
显示空白变更内容
内联 并排
Showing with 328 addition and 293 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 56c86acc
......@@ -62,76 +62,79 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
<div class="content">
<button class="controlButton" onclick="onStartClick">Start</button>
<button class="controlButton" onclick="onStopClick">Stop</button>
<div class="tutorial-page">
<div class="mymarquee">
<marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
id="testmarquee" onfinish="setfinish">
Life is a journey, not the destination.
</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>
```
```
```css
/* xxx.css */
.container {
.tutorial-page {
width: 750px;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ffffff;
justify-content: center;
}
.customMarquee {
width: 100%;
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;
.marqueetext {
font-size: 37px;
}
.content {
flex-direction: row;
.mymarquee {
margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
}
.controlButton {
flex-grow: 1;
background-color: #F2F2F2;
text-color: #0D81F2;
button{
width: 200px;
height: 80px;
margin-top: 100px;
}
```
```
```js
// xxx.js
export default {
data: {
scrollAmount: 30,
loop: 3,
marqueeDir: 'left',
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
private: {
loopval: 1,
scroll: 8,
color1: 'red'
},
onMarqueeStart: function() {
console.log("onMarqueeStart");
onInit(){
},
onMarqueeFinish: function() {
console.log("onMarqueeFinish");
setfinish(e) {
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) {
this.$element('customMarquee').start();
makestart(e) {
this.$element('testmarquee').start()
},
onStopClick (evt) {
this.$element('customMarquee').stop();
makestop(e) {
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
浏览文件 @ 56c86acc
......@@ -163,7 +163,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<select @change="selectChange">
......@@ -171,40 +171,47 @@
{{ item }}
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
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>
<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>
<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>
<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>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
picker{
width:60%;
height:80px;
border-radius:20px;
text-color:white;
font-size:15px;
background-color:#4747e3;
margin-left:20%;
picker {
width: 60%;
height: 80px;
border-radius: 20px;
text-color: white;
font-size: 15px;
background-color: #4747e3;
margin-left: 20%;
}
select{
select {
background-color: #efecec;
height: 50px;
width: 60%;
......@@ -215,72 +222,96 @@
}
```
```
```js
// xxx.js
import router from '@system.router';
import prompt from '@system.prompt';
export default {
data: {
selectList:["text","data","time","datetime","multitext"],
rangetext:['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue',
datevalue:'default datevalue',
timevalue:'default timevalue',
datetimevalue:'default datetimevalue',
multitextvalue:'default multitextvalue',
containsecond:true,
multitextselect:[1,2,0],
datetimeselect:'2012-5-6-11-25',
timeselect:'11:22:30',
dateselect:'2021-3-2',
textselect:'2'
selectList: ["text", "data", "time", "datetime", "multitext"],
rangetext: ['15', "20", "25"],
multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue: 'default textvalue',
datevalue: 'default datevalue',
timevalue: 'default timevalue',
datetimevalue: 'default datetimevalue',
multitextvalue: 'default multitextvalue',
containsecond: true,
multitextselect: [1, 2, 0],
datetimeselect: '2012-5-6-11-25',
timeselect: '11:22:30',
dateselect: '2021-3-2',
textselect: '2'
},
selectChange(e){
for(let i = 0;i<this.selectList.length;i++){
if(e.newValue == this.selectList[i]){
this.$element("picker"+i).show();
selectChange(e) {
for (let i = 0;i < this.selectList.length; i++) {
if (e.newValue == this.selectList[i]) {
this.$element("picker" + i).show();
}
}
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
prompt.showToast({
message: "text:" + e.newValue + ",newSelected:" + e.newSelected
})
},
textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" })
prompt.showToast({
message: "text: textoncancel"
})
},
dateonchange(e) {
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() {
prompt.showToast({ message:"date: dateoncancel" })
prompt.showToast({
message: "date: dateoncancel"
})
},
timeonchange(e) {
if(this.containsecond){
this.timevalue=e.hour+":"+e.minute+":"+e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
if (this.containsecond) {
this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
})
} else {
this.timevalue=e.hour+":"+e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
}},
this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute
})
}
},
timeoncancel() {
prompt.showToast({ message:"timeoncancel" })
prompt.showToast({
message: "timeoncancel"
})
},
datetimeonchange(e) {
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 })
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
})
},
datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" })
prompt.showToast({
message: "datetimeoncancel"
})
},
multitextonchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue })
this.multitextvalue = e.newValue;
prompt.showToast({
message: "Multi-column text change" + e.newValue
})
},
multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" })
prompt.showToast({
message: "multitextoncancel"
})
},
popup_picker() {
this.$element("picker_text").show();
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ 56c86acc
......@@ -98,7 +98,7 @@
## 示例
```
```html
<!-- index.hml -->
<div class="container">
<list class="todo-wrapper">
......@@ -112,22 +112,22 @@
</div>
```
```
```js
// index.js
export default {
data: {
todolist: [{
title: '刷题',
date: '2021-12-31 10:00:00',
date: '2021-12-31 10:00:00'
}, {
title: '看电影',
date: '2021-12-31 20:00:00',
date: '2021-12-31 20:00:00'
}],
},
}
```
```
```css
/* index.css */
.container {
display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
浏览文件 @ 56c86acc
......@@ -82,7 +82,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<div class="btn-div">
......@@ -91,7 +91,7 @@
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
<text class="txt">Simple panel in {{ modeFlag }} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
......@@ -101,13 +101,14 @@
</div>
```
```
```js
/* xxx.css */
.doc-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-div {
width: 100%;
height: 200px;
......@@ -115,16 +116,19 @@
align-items: center;
justify-content: center;
}
.txt {
color: #000000;
font-weight: bold;
font-size: 39px;
}
.panel-div {
width: 100%;
flex-direction: column;
align-items: center;
}
.inner-txt {
width: 100%;
height: 160px;
......@@ -132,6 +136,7 @@
align-items: center;
justify-content: center;
}
.inner-btn {
width: 100%;
height: 120px;
......@@ -140,7 +145,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ 56c86acc
......@@ -75,7 +75,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text id="text">Click to show the pop-up</text>
......@@ -88,7 +88,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -108,14 +108,14 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
duration: 3000,
duration: 3000
});
},
showpopup() {
......@@ -123,7 +123,7 @@ export default {
},
hidepopup() {
this.$element("popup").hide();
},
}
}
```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ 56c86acc
......@@ -60,25 +60,25 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class = "container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
<stepper-item class ="stepperItem" label="{{label_1}}">
<div class = "stepperItemContent" >
<text class = "text">First screen</text>
<text>First screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_2}}">
<div class = "stepperItemContent" >
<text class = "text">Second screen</text>
<text>Second screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_3}}">
<div class = "stepperItemContent" >
<text class = "text">Third screen</text>
<text>Third screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
......@@ -86,7 +86,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
margin-top: 20px;
......@@ -100,7 +100,6 @@
align-items: center;
}
.stepperItemContent {
color: #0000ff;
font-size: 50px;
justify-content: center;
}
......@@ -111,7 +110,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -132,7 +131,7 @@ export default {
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
}
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
......@@ -148,7 +147,7 @@ export default {
pendingIndex: e.pendingIndex
}
return index;
},
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 56c86acc
......@@ -16,7 +16,7 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
| --------- | ------------ | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.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，使拖动更灵敏，避免造成事件错乱。 |
## PanDirection枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 56c86acc
......@@ -305,9 +305,7 @@ struct CanvasExample {
this.context.moveTo(140, 10)
this.context.lineTo(140, 160)
this.context.stroke()
this.context.font = '18px sans-serif'
this.context.textAlign = 'start'
this.context.fillText('textAlign=start', 140, 60)
this.context.textAlign = 'end'
......@@ -350,9 +348,7 @@ struct TextBaseline {
this.context.moveTo(0, 120)
this.context.lineTo(400, 120)
this.context.stroke()
this.context.font = '20px sans-serif'
this.context.textBaseline = 'top'
this.context.fillText('Top', 10, 120)
this.context.textBaseline = 'bottom'
......@@ -426,7 +422,7 @@ struct LineDashOffset {
.onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0;
this.context.lineDashOffset = 10.0
this.context.stroke();
})
}
......@@ -498,8 +494,8 @@ struct GlobalCompositeOperation {
@Entry
@Component
struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -808,8 +804,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
@Entry
@Component
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -853,8 +849,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
@Entry
@Component
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -922,8 +918,8 @@ measureText(text: string): TextMetrics
@Entry
@Component
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1284,8 +1280,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1294,10 +1290,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.beginPath();
this.context.moveTo(20, 20);
this.context.quadraticCurveTo(100, 100, 200, 20);
this.context.stroke();
this.context.beginPath()
this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke()
})
}
.width('100%')
......@@ -1390,9 +1386,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.moveTo(100, 20);
this.context.arcTo(150, 20, 150, 70, 50);
this.context.stroke();
this.context.moveTo(100, 20)
this.context.arcTo(150, 20, 150, 70, 50)
this.context.stroke()
})
}
.width('100%')
......@@ -1571,17 +1567,17 @@ struct Fill {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();
let region = new Path2D()
region.moveTo(30, 90)
region.lineTo(110, 20)
region.lineTo(240, 130)
region.lineTo(60, 130)
region.lineTo(190, 20)
region.lineTo(270, 90)
region.closePath()
// Fill path
this.context.fillStyle = 'green';
this.context.fill(region, "evenodd");
this.context.fillStyle = 'green'
this.context.fill(region, "evenodd")
})
}
.width('100%')
......@@ -1666,9 +1662,9 @@ struct Clip {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let region = new Path2D();
region.rect(80,10,20,130);
region.rect(40,50,100,50);
let region = new Path2D()
region.rect(80,10,20,130)
region.rect(40,50,100,50)
this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height)
......@@ -1995,9 +1991,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
@Entry
@Component
struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -2006,7 +2002,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
})
}
.width('100%')
......@@ -2099,8 +2095,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
@Entry
@Component
struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() {
......@@ -2110,9 +2106,9 @@ struct GetImageData {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130);
var imagedata = this.context.getImageData(50,50,130,130);
this.context.putImageData(imagedata,150,150);
this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150)
})
}
.width('100%')
......@@ -2379,7 +2375,7 @@ struct ToDataURL {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var dataURL = this.context.toDataURL();
var dataURL = this.context.toDataURL()
})
}
.width('100%')
......@@ -2413,11 +2409,11 @@ restore(): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save(); // save the default state
this.context.fillStyle = "green";
this.context.fillRect(20, 20, 100, 100);
this.context.restore(); // restore to the default state
this.context.fillRect(150, 75, 100, 100);
this.context.save() // save the default state
this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100)
})
}
.width('100%')
......@@ -2451,11 +2447,11 @@ save(): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save(); // save the default state
this.context.fillStyle = "green";
this.context.fillRect(20, 20, 100, 100);
this.context.restore(); // restore to the default state
this.context.fillRect(150, 75, 100, 100);
this.context.save() // save the default state
this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100)
})
}
.width('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 56c86acc
......@@ -61,7 +61,7 @@ struct GestureGroupExample {
.margin(20)
.border({ width: 3, style: this.borderStyles })
.gesture(
//以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
// 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 56c86acc
......@@ -17,19 +17,19 @@ addColorStop(offset: number, color: string): void
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | '#ffffff' | 设置渐变的颜色。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | '#ffffff' | 设置渐变的颜色。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Page45 {
// xxx.ets
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
......@@ -39,8 +39,8 @@ addColorStop(offset: number, color: string): void
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
.onReady(() => {
var grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
......@@ -50,7 +50,8 @@ addColorStop(offset: number, color: string): void
}
.width('100%')
.height('100%')
}}
}
}
```
![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或