Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9f5944cb
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
9f5944cb
编写于
9月 30, 2022
作者:
O
openharmony_ci
提交者:
Gitee
9月 30, 2022
浏览文件
操作
浏览文件
下载
差异文件
!10250 格式整改挑单到3.1release
Merge pull request !10250 from 田雨/OpenHarmony-3.1-Release
上级
3afbe357
99e0a7ff
变更
17
展开全部
隐藏空白更改
内联
并排
Showing
17 changed file
with
369 addition
and
335 deletion
+369
-335
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
...cation-dev/reference/arkui-js/js-components-basic-span.md
+1
-1
zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md
...tion-dev/reference/arkui-js/js-components-basic-toggle.md
+46
-29
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
...ev/reference/arkui-js/js-components-basic-toolbar-item.md
+9
-9
zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md
...-dev/reference/arkui-js/js-components-container-swiper.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
...eference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+209
-209
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
...rence/arkui-ts/ts-transition-animation-shared-elements.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
...ation-dev/reference/arkui-ts/ts-universal-events-click.md
+9
-9
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
...ation-dev/reference/arkui-ts/ts-universal-events-touch.md
+17
-17
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
...lication-dev/reference/arkui-ts/ts-universal-mouse-key.md
+3
-3
zh-cn/application-dev/ui/arkui-overview.md
zh-cn/application-dev/ui/arkui-overview.md
+1
-1
zh-cn/application-dev/ui/figures/custom-dialog-demo.gif
zh-cn/application-dev/ui/figures/custom-dialog-demo.gif
+0
-0
zh-cn/application-dev/ui/js-framework-syntax-js.md
zh-cn/application-dev/ui/js-framework-syntax-js.md
+4
-4
zh-cn/application-dev/ui/ts-component-based-customdialog.md
zh-cn/application-dev/ui/ts-component-based-customdialog.md
+2
-0
zh-cn/application-dev/ui/ui-js-components-path2d.md
zh-cn/application-dev/ui/ui-js-components-path2d.md
+59
-44
zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md
...application-dev/ui/ui-ts-building-category-grid-layout.md
+1
-1
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @
9f5944cb
...
@@ -12,7 +12,7 @@
...
@@ -12,7 +12,7 @@
## 子组件
## 子组件
支持子组件
<
span
>
。
无
## 属性
## 属性
...
...
zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md
浏览文件 @
9f5944cb
...
@@ -56,7 +56,7 @@
...
@@ -56,7 +56,7 @@
## 示例
## 示例
```
```
html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div
style=
"flex-direction: column;"
>
<div
style=
"flex-direction: column;"
>
<text
class=
"margin"
>
1. Multiple choice example
</text>
<text
class=
"margin"
>
1. Multiple choice example
</text>
...
@@ -71,44 +71,61 @@
...
@@ -71,44 +71,61 @@
</div>
</div>
```
```
```
```
css
/* xxx.css */
/* xxx.css */
.margin
{
.margin
{
margin
:
7px
;
margin
:
7px
;
}
}
```
```
```
```
js
// xxx.js
// xxx.js
export
default
{
export
default
{
data: {
data
:
{
toggle_list: [
toggle_list
:
[
{ "id":"1001", "name":"Living room", "checked":true },
{
{ "id":"1002", "name":"Bedroom", "checked":false },
"
id
"
:
"
1001
"
,
"
name
"
:
"
Living room
"
,
"
checked
"
:
true
{ "id":"1003", "name":"Second bedroom", "checked":false },
},
{ "id":"1004", "name":"Kitchen", "checked":false },
{
{ "id":"1005", "name":"Study", "checked":false },
"
id
"
:
"
1002
"
,
"
name
"
:
"
Bedroom
"
,
"
checked
"
:
false
{ "id":"1006", "name":"Garden", "checked":false },
},
{ "id":"1007", "name":"Bathroom", "checked":false },
{
{ "id":"1008", "name":"Balcony", "checked":false },
"
id
"
:
"
1003
"
,
"
name
"
:
"
Second bedroom
"
,
"
checked
"
:
false
],
},
toggles: ["Living room","Bedroom","Kitchen","Study"],
{
idx: ""
"
id
"
:
"
1004
"
,
"
name
"
:
"
Kitchen
"
,
"
checked
"
:
false
},
},
allclick(arg) {
{
this.idx = arg
"
id
"
:
"
1005
"
,
"
name
"
:
"
Study
"
,
"
checked
"
:
false
},
},
allchange(e) {
{
if (e.checked === true) {
"
id
"
:
"
1006
"
,
"
name
"
:
"
Garden
"
,
"
checked
"
:
false
for (var i = 0; i < this.toggle_list.length; i++) {
},
if (this.toggle_list[i].id === this.idx) {
{
this.toggle_list[i].checked = true
"
id
"
:
"
1007
"
,
"
name
"
:
"
Bathroom
"
,
"
checked
"
:
false
} else {
},
this.toggle_list[i].checked = false
{
"
id
"
:
"
1008
"
,
"
name
"
:
"
Balcony
"
,
"
checked
"
:
false
},
],
toggles
:
[
"
Living room
"
,
"
Bedroom
"
,
"
Kitchen
"
,
"
Study
"
],
idx
:
""
},
allclick
(
arg
)
{
this
.
idx
=
arg
;
},
allchange
(
e
)
{
if
(
e
.
checked
!=
true
)
{
return
;
}
for
(
var
i
=
0
;
i
<
this
.
toggle_list
.
length
;
i
++
)
{
if
(
this
.
toggle_list
[
i
].
id
===
this
.
idx
)
{
this
.
toggle_list
[
i
].
checked
=
true
;
}
else
{
this
.
toggle_list
[
i
].
checked
=
false
;
}
}
}
}
}
}
}
}
}
```
```
...
...
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
浏览文件 @
9f5944cb
...
@@ -3,7 +3,7 @@
...
@@ -3,7 +3,7 @@
>  **说明:**
>  **说明:**
> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
工具栏子组件。作为工具栏组件的子组件,用于展示工具栏上的一个操作选项。
工具栏
[
toolbar
](
js-components-basic-toolbar.md
)
子组件。 用于展示工具栏上的一个操作选项。
## 子组件
## 子组件
...
@@ -57,15 +57,15 @@
...
@@ -57,15 +57,15 @@
## 示例
## 示例
```
```
html
<!-- xxx.hml -->
<!-- xxx.hml -->
<toolbar style="position
: fixed; bottom: 0px; ">
<toolbar
style=
"position
: fixed; bottom : 0px;"
>
<toolbar-item icon='common/Icon/location.png' value='Option 1' >
</toolbar-item>
<toolbar-item
icon=
'common/Icon/location.png'
value=
'Option 1'
>
</toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 2'> </toolbar-item>
<toolbar-item
icon=
'common/Icon/heart.png'
value=
'Option 2'
></toolbar-item>
<toolbar-item icon='common/Icon/diamond.png' value='Option 3' > </toolbar-item>
<toolbar-item
icon=
'common/Icon/diamond.png'
value=
'Option 3'
></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 4' > </toolbar-item>
<toolbar-item
icon=
'common/Icon/heart.png'
value=
'Option 4'
></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 5' >
</toolbar-item>
<toolbar-item
icon=
'common/Icon/heart.png'
value=
'Option 5'
>
</toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 6'> </toolbar-item>
<toolbar-item
icon=
'common/Icon/heart.png'
value=
'Option 6'
></toolbar-item>
</toolbar>
</toolbar>
```
```
...
...
zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @
9f5944cb
...
@@ -12,7 +12,7 @@
...
@@ -12,7 +12,7 @@
## 子组件
## 子组件
支持除
<
list
>
之外的
子组件。
可以包含
子组件。
## 属性
## 属性
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @
9f5944cb
...
@@ -23,9 +23,9 @@ Row(value?:{space?: string | number})
...
@@ -23,9 +23,9 @@ Row(value?:{space?: string | number})
**参数:**
**参数:**
| 参数名 | 参数类型 | 必填 |
默认值 | 参数描述
|
| 参数名 | 参数类型 | 必填 |
参数描述
|
| ------ | -------------------------- | ---- | ------
|
------------------ |
| ------ | -------------------------- | ---- | ------
----------------
------------------ |
| space | string
\|
number | 否 |
0 | 横向布局元素间距。
|
| space | string
\|
number | 否 |
横向布局元素间距。
<br/>
默认值:0,单位vp
|
## 属性
## 属性
...
...
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @
9f5944cb
此差异已折叠。
点击以展开。
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
浏览文件 @
9f5944cb
...
@@ -9,9 +9,9 @@
...
@@ -9,9 +9,9 @@
## 属性
## 属性
| 名称
| 参数 | 参数描述
|
| 名称
| 参数 | 参数描述
|
| ---------------- | ----------------------------------------
|
---------------------------------------- |
| ---------------- | ----------------------------------------
-------------------- | --------------------
---------------------------------------- |
| sharedTransition | id:
string,
<br/>
{
<br/>
duration?: number,
<br/>
curve?: Curve
\|
string,
<br/>
delay?: number,
<br/>
motionPath?:
<br/>
{
<br/>
path: string,
<br/>
form?: number,
<br/>
to?: number,
<br/>
rotatable?: boolean
<br/>
},
<br/>
zIndex?: number,
<br/>
type?:
[
SharedTransitionEffectType
](
ts-appendix-enums.md#sharedtransitioneffecttype
)
<br/>
} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。
<br/>
-
id:设置组件的id。
<br/>
-
duration:单位为毫秒,默认动画时长为1000毫秒。
<br/>
-
curve:默认曲线为Linear,有效值参见[Curve](ts-appendix-enums.md#curve)
说明。
<br/>
-
delay:单位为毫秒,默认不延时播放。
<br/>
-
motionPath:运动路径信息。
<br/>
-
path:设置路径。
<br/>
-
from:设置起始值。
<br/>
-
to:设置终止值。
<br/>
-
rotatable:是否旋转。
<br/>
-
zIndex:设置Z轴。
<br/>
-
type:动画类型。 |
| sharedTransition | id:
string,
<br/>
{
<br/>
duration?: number,
<br/>
curve?: Curve
\|
string,
<br/>
delay?: number,
<br/>
motionPath?:
<br/>
{
<br/>
path: string,
<br/>
form?: number,
<br/>
to?: number,
<br/>
rotatable?: boolean
<br/>
},
<br/>
zIndex?: number,
<br/>
type?:
[
SharedTransitionEffectType
](
ts-appendix-enums.md#sharedtransitioneffecttype
)
<br/>
} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。
<br/>
-
id:设置组件的id。
<br/>
-
duration:单位为毫秒,默认动画时长为1000毫秒。
<br/>
-
curve:默认曲线为Linear,有效值参见[Curve](ts-appendix-enums.md#curve)
说明。
<br/>
-
delay:单位为毫秒,默认不延时播放。
<br/>
-
motionPath:运动路径信息。
<br/>
-
path:设置路径。
<br/>
-
from:设置起始值。
<br/>
-
to:设置终止值。
<br/>
-
rotatable:是否旋转。
<br/>
-
zIndex:设置Z轴。
<br/>
-
type:动画类型。 |
## 示例
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @
9f5944cb
...
@@ -12,15 +12,15 @@
...
@@ -12,15 +12,15 @@
| onClick(event:
(event?:
ClickEvent)
=
>
void) | 否 | 点击动作触发该方法调用,event参数见ClickEvent介绍。 |
| onClick(event:
(event?:
ClickEvent)
=
>
void) | 否 | 点击动作触发该方法调用,event参数见ClickEvent介绍。 |
## ClickEvent对象说明
## ClickEvent对象说明
| 属性名称 | 类型 | 描述 |
| 属性名称 | 类型 | 描述
|
| ---------------------- | ------------------------------------ | ------------------------------------- |
| ---------------------- | ------------------------------------ | -------------------------------------
-------------------
|
| screenX | number | 点击点相对于
设备屏幕左边沿的X坐标。
|
| screenX | number | 点击点相对于
应用窗口左上角的X坐标。
|
| screenY | number | 点击点相对于
设备屏幕上边沿的Y坐标。
|
| screenY | number | 点击点相对于
应用窗口左上角的Y坐标。
|
| x | number | 点击点相对于被点击元素左边沿的X坐标。 |
| x | number | 点击点相对于被点击元素左边沿的X坐标。
|
| y | number | 点击点相对于被点击元素上边沿的Y坐标。 |
| y | number | 点击点相对于被点击元素上边沿的Y坐标。
|
| target
<sup>
8+
</sup>
|
[
EventTarget
](
#eventtarget8对象说明
)
| 被点击元素对象。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
#eventtarget8对象说明
)
| 被点击元素对象。
|
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。
|
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。
触发事件时距离系统启动的时间间隔,单位纳秒。
|
| source
<sup>
8+
</sup>
|
[
SourceType
](
ts-gesture-settings.md
)
| 事件输入设备。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
ts-gesture-settings.md
)
| 事件输入设备。
|
## EventTarget<sup>8+</sup>对象说明
## EventTarget<sup>8+</sup>对象说明
| 名称 | 参数类型 | 描述 |
| 名称 | 参数类型 | 描述 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @
9f5944cb
...
@@ -14,27 +14,27 @@
...
@@ -14,27 +14,27 @@
## TouchEvent对象说明
## TouchEvent对象说明
| 名称 | 类型 | 描述 |
| 名称 | 类型 | 描述 |
| ------------------- | ---------------------------------------- | ------------ |
| ------------------- | ---------------------------------------- | ------------ |
| type |
[
TouchType
](
ts-appendix-enums.md#touchtype
)
| 触摸事件的类型。 |
| type |
[
TouchType
](
ts-appendix-enums.md#touchtype
)
| 触摸事件的类型。 |
| touches | Array
<
[TouchObject](#touchobject对象说明)
>
| 全部手指信息。 |
| touches | Array
<
[TouchObject](#touchobject对象说明)
>
| 全部手指信息。 |
| changedTouches | Array
<
[TouchObject](#touchobject对象说明)
>
| 当前发生变化的手指信息。 |
| changedTouches | Array
<
[TouchObject](#touchobject对象说明)
>
| 当前发生变化的手指信息。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳
。 |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。触发事件时距离系统启动的时间间隔,单位纳秒
。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md
)
| 触发手势事件的元素对象显示区域。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md
)
| 触发手势事件的元素对象显示区域。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
ts-gesture-settings.md
)
| 事件输入设备。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
ts-gesture-settings.md
)
| 事件输入设备。 |
## TouchObject对象说明
## TouchObject对象说明
| 名称 | 类型
| 描述
|
| 名称 | 类型
| 描述
|
| ------- | ---------------------------
|
------------------- |
| ------- | ---------------------------
---------------- | ------------------
------------------- |
| type |
[
TouchType
](
ts-appendix-enums.md#touchtype
)
| 触摸事件的类型。 |
| type |
[
TouchType
](
ts-appendix-enums.md#touchtype
)
| 触摸事件的类型。
|
| id | number
| 手指唯一标识符。
|
| id | number
| 手指唯一标识符。
|
| screenX | number
| 触摸点相对于设备屏幕左边沿的X坐标。
|
| screenX | number
| 触摸点相对于应用窗口左上角的X坐标。
|
| screenY | number
| 触摸点相对于设备屏幕上边沿的Y坐标。
|
| screenY | number
| 触摸点相对于应用窗口左上角的Y坐标。
|
| x | number | 触摸点相对于被触摸元素左边沿的X坐标。 |
| x | number
| 触摸点相对于被触摸元素左边沿的X坐标。 |
| y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 |
| y | number
| 触摸点相对于被触摸元素上边沿的Y坐标。 |
## 示例
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @
9f5944cb
...
@@ -17,14 +17,14 @@
...
@@ -17,14 +17,14 @@
| 名称 | 属性类型 | 描述 |
| 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- |
| --------- | ------------------------------- | -------------------- |
| screenX | number | 点击触点相对于
屏幕左上角的x轴坐标。
|
| screenX | number | 点击触点相对于
应用窗口左上角的x轴坐标。
|
| screenY | number | 点击触点相对于
屏幕左上角的y轴坐标。
|
| screenY | number | 点击触点相对于
应用窗口左上角的y轴坐标。
|
| x | number | 点击触点相对于当前组件左上角的x轴坐标。 |
| x | number | 点击触点相对于当前组件左上角的x轴坐标。 |
| y | number | 点击触点相对于当前组件左上角的y轴坐标。 |
| y | number | 点击触点相对于当前组件左上角的y轴坐标。 |
| button |
[
MouseButton
](
ts-appendix-enums.md#mousebutton
)
| 鼠标按键。 |
| button |
[
MouseButton
](
ts-appendix-enums.md#mousebutton
)
| 鼠标按键。 |
| action |
[
MouseAction
](
ts-appendix-enums.md#mouseaction
)
| 事件动作。 |
| action |
[
MouseAction
](
ts-appendix-enums.md#mouseaction
)
| 事件动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。
|
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。
触发事件时距离系统启动的时间间隔,单位纳秒。
|
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md
)
| 触发手势事件的元素对象显示区域。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md
)
| 触发手势事件的元素对象显示区域。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
ts-gesture-settings.md
)
| 事件输入设备。 |
| source
<sup>
8+
</sup>
|
[
SourceType
](
ts-gesture-settings.md
)
| 事件输入设备。 |
...
...
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @
9f5944cb
...
@@ -14,7 +14,7 @@
...
@@ -14,7 +14,7 @@
## 主要特征
## 主要特征
-
UI组件:方舟开发框架不仅提供了多种基础组件,
如文本显示、图片显示、按键交互等
,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
-
UI组件:方舟开发框架不仅提供了多种基础组件,
例如文本、图片、按钮等
,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
-
布局:UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
-
布局:UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
...
...
zh-cn/application-dev/ui/figures/custom-dialog-demo.gif
0 → 100644
浏览文件 @
9f5944cb
507.9 KB
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @
9f5944cb
...
@@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
...
@@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
images: [
images: [
{ src: '/common/frame1.png' },
{ src: '/common/frame1.png' },
{ src: '/common/frame2.png' },
{ src: '/common/frame2.png' },
{ src: '/common/frame3.png' }
,
{ src: '/common/frame3.png' }
]
,
]
},
},
handleClick() {
handleClick() {
const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
...
@@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
...
@@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
images: [
images: [
{ src: '/common/frame1.png' },
{ src: '/common/frame1.png' },
{ src: '/common/frame2.png' },
{ src: '/common/frame2.png' },
{ src: '/common/frame3.png' }
,
{ src: '/common/frame3.png' }
]
,
]
},
},
handleClick() {
handleClick() {
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
...
...
zh-cn/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @
9f5944cb
...
@@ -47,3 +47,5 @@ struct CustomDialogUser {
...
@@ -47,3 +47,5 @@ struct CustomDialogUser {
}
}
}
}
```
```
!
[
custom-dialog-demo
](
figures/custom-dialog-demo.gif
)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @
9f5944cb
...
@@ -68,7 +68,7 @@ export default {
...
@@ -68,7 +68,7 @@ export default {
path.moveTo(600, 535);
path.moveTo(600, 535);
path.arc(520, 450, 85, 0, 6);
path.arc(520, 450, 85, 0, 6);
ctx.stroke(path);
ctx.stroke(path);
}
,
}
}
}
```
```
...
@@ -131,51 +131,66 @@ text{
...
@@ -131,51 +131,66 @@ text{
```
```
// xxx.js
// xxx.js
import prompt from '@system.prompt';
import prompt from '@system.prompt';
export default {
export default {
data:{
data: {
ctx: null,
ctx: null,
path1: null,
path1: null,
path2: null,
path2: null,
path3: null,
path3: null,
isAdd: "addPath2",
isAdd: "addPath2",
isChange: true,
isChange: true,
textName: 'change'
textName: 'change'
},
},
onShow(){
onShow() {
this.ctx = this.$refs.canvas.getContext('2d',{antialias:true});
this.ctx = this.$refs.canvas.getContext('2d', {
this.path1 = this.ctx.createPath2D();
antialias: true
this.path1.moveTo(200, 200);
});
this.path1.lineTo(400, 200);
this.path1 = this.ctx.createPath2D();
this.path1.lineTo(400, 400);
// 正方形
this.path1.lineTo(200, 400);
this.path1.moveTo(200, 200);
this.path1.closePath();
this.path1.lineTo(400, 200);
this.path2 = this.ctx.createPath2D();
this.path1.lineTo(400, 400);
this.path2.arc(300, 300, 75, 0, 6.28)
this.path1.lineTo(200, 400);
this.ctx.stroke(this.path1);
this.path1.closePath();
},
this.path2 = this.ctx.createPath2D();
addPath(){
// 圆形
if(this.isAdd == "addPath2"){
this.path2.arc(300, 300, 75, 0, 6.28);
this.ctx.clearRect(0,0,600,600)
this.ctx.stroke(this.path1);
this.ctx.beginPath();
},
this.path2.addPath(this.path1)
addPath() {
this.ctx.stroke(this.path2);
if (this.isAdd == "addPath2") {
this.isAdd = "clearPath2"
// 删除指定指定区域的绘制内容
}else{
this.ctx.clearRect(0, 0, 600, 600);
this.ctx.clearRect(0,0,600,600)
this.ctx.beginPath();
this.ctx.stroke(this.path1); this.isAdd = "addPath2"
// 将另一个的路径添加到当前路径对象中
}
this.path2.addPath(this.path1);
},
this.ctx.stroke(this.path2);
setTransform(){
this.isAdd = "clearPath2";
if(this.isChange){
} else {
this.ctx.clearRect(0,0,600,600)
this.ctx.clearRect(0, 0, 600, 600);
this.path3 = this.ctx.createPath2D();
this.ctx.stroke(this.path1);
this.path3.arc(150, 150, 100, 0, 6.28)
this.isAdd = "addPath2";
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); this.ctx.stroke(this.path3); this.isChange = !this.isChange; this.textName = "back"
}
}else{
},
this.ctx.clearRect(0,0,600,600)
setTransform() {
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);this.ctx.stroke(this.path3);this.isChange = !this.isChange; this.textName = "change"
if (this.isChange) {
this.ctx.clearRect(0, 0, 600, 600);
this.path3 = this.ctx.createPath2D();
this.path3.arc(150, 150, 100, 0, 6.28);
// 重置现有的变换矩阵并创建新的变换矩阵
this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "back"
} else {
this.ctx.clearRect(0, 0, 600, 600);
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "change";
}
}
}
},
}
}
```
```
...
...
zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md
浏览文件 @
9f5944cb
...
@@ -320,7 +320,7 @@
...
@@ -320,7 +320,7 @@
}
}
```
```
自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后,执行自定义组件build方法之前。aboutToDisappear在自定义组件的去初始化的时机执行。
自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后,执行自定义组件build方法之前。aboutToDisappear在自定义组件销毁之前的时机执行。
!
[
zh-cn_image_0000001215113569
](
figures/zh-cn_image_0000001215113569.png
)
!
[
zh-cn_image_0000001215113569
](
figures/zh-cn_image_0000001215113569.png
)
...
...
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @
9f5944cb
...
@@ -130,7 +130,7 @@ listener.on('change', onPortrait)
...
@@ -130,7 +130,7 @@ listener.on('change', onPortrait)
}
}
aboutToAppear() {
aboutToAppear() {
portraitFunc = this.onPortrait.bind(this) //
bind current js instance
portraitFunc = this.onPortrait.bind(this) //
绑定当前应用实例
this.listener.on('change', portraitFunc)
this.listener.on('change', portraitFunc)
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录