Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“e303897f35345cafeba7169883479c7b99c304df”上不存在“doc/faq/git@gitcode.net:s920243400/PaddleDetection.git”
未验证 提交 0567184d 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!3217 updata docs 

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