Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 c6ce73bb 编写于 作者: W wangshuainan
浏览文件
操作

update docs 

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
上级 a33ba33b
显示空白变更内容
内联 并排
Showing with 110 addition and 63 deletion
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ c6ce73bb
......@@ -11,8 +11,9 @@
<!-- xxx.hml -->
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />;</div>
<input type="button" style="width: 180px; height: 60px;" value="handleClick" onclick="handleClick" />
<input type="button" style="width: 180px; height: 60px;" value="antialias" onclick="antialias" />
</div>
```
```
......@@ -67,12 +68,13 @@
### fillStyle
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -108,6 +110,7 @@ export default {
ctx.strokeRect(25, 25, 85, 105);
}
}
```
![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
......@@ -279,6 +282,7 @@ export default {
ctx.fillText('textAlign=right',140, 140);
}
}
```
......@@ -340,6 +344,7 @@ export default {
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
}
}
```
......@@ -389,12 +394,12 @@ export default {
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
- 示例
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -423,12 +428,12 @@ export default {
### shadowBlur
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -571,12 +576,12 @@ fillRect(x: number, y: number, width:number, height: number): void
| height | number | 指定矩形的高度。 |
- 示例
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -1740,8 +1745,8 @@ createImageData(width: number, height: number, imageData: Object): Object
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
var imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
var newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
}
}
```
......@@ -1777,8 +1782,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
//xxx.js
export default {
onShow() {
var test = this.$element('getImageData')
var ctx = test.getContext('2d');
const test = this.$element('getImageData')
const ctx = test.getContext('2d');
var imageData = ctx.getImageData(0, 0, 280, 300);
}
}
......@@ -1813,8 +1818,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
//xxx.js
export default {
onShow() {
var test = this.$element('getImageData')
var ctx = test.getContext('2d');
const test = this.$element('getImageData')
const ctx = test.getContext('2d');
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ c6ce73bb
......@@ -71,5 +71,3 @@ struct ImageEffectsExample {
}
}
```
![zh-cn_image_0000001219864157](figures/zh-cn_image_0000001219864157.png)
zh-cn/application-dev/ui/ts-system-resource-access.md
浏览文件 @ c6ce73bb
......@@ -8,13 +8,13 @@
```
Text('Hello')
.fontColor($r('sys.color.id_color_emphasize'))
.fontSize($r('sys.float.id_text_size_headline1'))
.fontFamily($r('sys.string.id_text_font_family_medium'))
.backgroundColor($r('sys.color.id_color_palette_aux1'))
Image($r('sys.media.ic_app'))
.border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')})
.fontColor($r('sys.color.ohos_id_color_emphasize'))
.fontSize($r('sys.float.ohos_id_text_size_headline1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
Image($r('sys.media.ohos_app_icon'))
.border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ c6ce73bb
......@@ -17,6 +17,7 @@
```
/* xxx.css */
.container {
height: 100%;
background-color:#F1F3F5;
display: flex;
flex-direction: column;
......@@ -81,3 +82,5 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ c6ce73bb
......@@ -142,7 +142,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
margin-top: 10px;
height: 300px;
color: blue;
justify-content: center; align-items: center;
justify-content: center;
align-items: center;
}
```
......@@ -306,4 +307,4 @@ export default {
}
```
![zh-cn_image_tab](figures\zh-cn_image_tab.gif)
![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-button.md
浏览文件 @ c6ce73bb
......@@ -157,7 +157,7 @@ export default {
setProgress(e) {
if(this.isPaused){
prompt.showToast({
message: "Download started"
message: "Started Ddownloading"
})
this.star();
this.isPaused = false;
......
zh-cn/application-dev/ui/ui-js-components-chart.md
浏览文件 @ c6ce73bb
......@@ -117,6 +117,9 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱
justify-content: center;
background-color: #F1F3F5;
}
.tab-bar{
background-color: #F1F3F5;
}
.chart-data {
width: 700px;
height: 600px;
......@@ -494,6 +497,7 @@ export default {
interval: null,
title: "数据展示",
allowScale: true,
dataLength: 30,
barGroup: 3,
lineData: null,
lineOps: {
......
zh-cn/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ c6ce73bb
......@@ -9,7 +9,8 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId"><div class="content" dragable="ture">
<dialog class="dialogClass" id="dialogId" dragable="true">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
......@@ -71,7 +72,7 @@ export default {
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
<div class="dialogDiv">
<text>dialog</text>
<button value="confirm" onclick="confirmClick"></button>
......@@ -120,13 +121,21 @@ button{
/* xxx.js */
import prompt from '@system.prompt';
export default {
canceldialog(e){
prompt.showToast({
message: 'dialogCancel'
})
},
openDialog(){
this.$element('dialogId').show()
prompt.showToast({
message: 'dialogShow'
})
},
confirmClick(e) {
this.$element('dialogId').close()
prompt.showToast({
message: 'Confirmed.'
message: 'dialogClose'
})
},
}
......
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @ c6ce73bb
......@@ -56,14 +56,18 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.formClass{
width: 100%;
height: 20%;
width: 80%;
height: 100px;
padding: 10px;
border: 1px solid #cccccc;
}
```
......@@ -85,11 +89,10 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="width: 100%;justify-content: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" >
<div style="width: 100%;justify-content: center; margin-top: 20px">
<input type="submit" value="Submit" style="width:120px; margin-right:20px;" >
</input>
<input type="reset" value="Reset" style="width:100px;"></input>
</div>
<input type="reset" value="Reset" style="width:120px;"></input>
</div>
</form>
</div>
......@@ -101,15 +104,16 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
width: 100%;
height: 100%;
flex-direction: column;
justify-items: center
justify-items: center;
align-items: center;
background-color: #F1F3F5;
}
.form{
width: 100%;
height: 30%;
margin-top: 40%;
flex-direction: column;
justify-items: center
justify-items: center;
align-items: center;
}
```
......
zh-cn/application-dev/ui/ui-js-components-images.md
浏览文件 @ c6ce73bb
......@@ -44,6 +44,8 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -82,6 +84,8 @@ image{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-self: center;
......@@ -116,7 +120,8 @@ export default {
}
```
![zh-cn_image_0000001188931396](figures/zh-cn_image_0000001188931396.gif)
![zh-cn_image_images](figures/zh-cn_image_images.gif)
## 场景示例
......@@ -139,6 +144,8 @@ export default {
```
/* xxx.css */
.page-container {
width: 100%;
height: 100%;
flex-direction:column;
align-self: center;
justify-content: center;
......
zh-cn/application-dev/ui/ui-js-components-list.md
浏览文件 @ c6ce73bb
......@@ -231,12 +231,15 @@ export default {
```
/* index.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
.list {
width: 100%;
height: 100%;
height: 90%;
flex-grow: 1;
}
.item {
height: 120px;
......
zh-cn/application-dev/ui/ui-js-components-stepper.md
浏览文件 @ c6ce73bb
......@@ -72,7 +72,7 @@ text{
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
background-color: #F1F3F5;
}
text{
width: 100%;
......@@ -87,7 +87,7 @@ text{
```
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
<div class="container">
<stepper index="1">
<stepper-item label="{{label_1}}">
<text>stepper-item1</text>
......@@ -111,7 +111,7 @@ text{
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
background-color: #F1F3F5;
}
text{
width: 100%;
......@@ -124,7 +124,10 @@ text{
/* index.js */
export default {
data: {
label_1:{ nextLabel: 'NEXT', status: 'normal' },
label_1:{
nextLabel: 'NEXT',
status: 'normal'
},
label_2:{
prevLabel: 'BACK',
nextLabel: 'NEXT',
......@@ -173,7 +176,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框
height: 300px;
}
.stepperClass{
border:1px solid silver ; background-color: white;
border:1px solid silver ;
background-color: white;
}
text{
width: 100%;
......
zh-cn/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ c6ce73bb
......@@ -159,7 +159,11 @@ text{
swiper{
width: 500px;
height: 500px;
border-radius: 250px;indicator-color: white; indicator-selected-color: blue; indicator-size: 40px; indicator-top: 100px;
border-radius: 250px;
indicator-color: white;
indicator-selected-color: blue;
indicator-size: 40px;
indicator-top: 100px;
overflow: hidden ;
}
.item{
......@@ -330,7 +334,8 @@ swiper{
transform: scale(0.5);
}
.actived{
transform: scale(1);border: 1px solid #b20937ea;
transform: scale(1);
border: 1px solid #b20937ea;
}
```
......
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @ c6ce73bb
......@@ -155,6 +155,8 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
......@@ -167,6 +169,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
justify-content: center;
}
.text1{
width: 100%;
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
......@@ -175,6 +178,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
font-size: 40px;
}
.text2{
width: 100%;
height: 200px;
border:1px solid #0931e8;
text-align: center;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或