Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 8aeebccc 编写于 作者: H HelloCrease
浏览文件
操作

geshi 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 cdb6cf82
隐藏空白更改
内联 并排
Showing with 1292 addition and 1054 deletion
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 8aeebccc
...@@ -7,36 +7,37 @@ ...@@ -7,36 +7,37 @@
组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 | | duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | Curve | Curve.Linear | 默认曲线为线性。 | | curve | Curve | Curve.Linear | 默认曲线为线性。 |
| delay | number | 0 | 单位为毫秒，默认不延时播放。 | | delay | number | 0 | 单位为毫秒，默认不延时播放。 |
| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 | | iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode枚举值说明) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 | | playMode | [PlayMode](ts-appendix-enums.md#playmode枚举值说明) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
- Curve枚举说明 - Curve枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------------------- | ---------------------------------------- |
| Linear | 表示动画从头到尾的速度都是相同的。 | | Linear | 表示动画从头到尾的速度都是相同的。 |
| Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。 | | Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。 |
| EaseIn | 表示动画以低速开始，CubicBezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 | | EaseIn | 表示动画以低速开始，CubicBezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| EaseOut | 表示动画以低速结束，CubicBezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 | | EaseOut | 表示动画以低速结束，CubicBezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 | | EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| FastOutSlowIn | 标准曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 | | FastOutSlowIn | 标准曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| LinearOutSlowIn | 减速曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 | | LinearOutSlowIn | 减速曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| FastOutLinearIn | 加速曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 | | FastOutLinearIn | 加速曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。 | | ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。 |
| Sharp | 锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。 | | Sharp | 锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。 |
| Rhythm | 节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 | | Rhythm | 节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| Smooth | 平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。 | | Smooth | 平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。 |
| Friction | 阻尼曲线，CubicBezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 | | Friction | 阻尼曲线，CubicBezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AttrAnimationExample { struct AttrAnimationExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ 8aeebccc
...@@ -39,7 +39,8 @@ Blank(min?: Length) ...@@ -39,7 +39,8 @@ Blank(min?: Length)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BlankExample { struct BlankExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ 8aeebccc
...@@ -64,7 +64,8 @@ ...@@ -64,7 +64,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ButtonExample { struct ButtonExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ 8aeebccc
...@@ -41,7 +41,8 @@ Checkbox( name?: string, group?: string ) ...@@ -41,7 +41,8 @@ Checkbox( name?: string, group?: string )
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CheckboxExample { struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 8aeebccc
...@@ -48,7 +48,8 @@ CheckboxGroup( group?: string ) ...@@ -48,7 +48,8 @@ CheckboxGroup( group?: string )
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CheckboxExample { struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ DataPanel(value:{values: number[], max?: number, type?: DataPanelType}) ...@@ -34,7 +34,8 @@ DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DataPanelExample { struct DataPanelExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 8aeebccc
...@@ -57,7 +57,8 @@ DatePicker(options?: DatePickerOptions) ...@@ -57,7 +57,8 @@ DatePicker(options?: DatePickerOptions)
### 日期选择器（显示农历） ### 日期选择器（显示农历）
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DatePickerExample01 { struct DatePickerExample01 {
...@@ -84,7 +85,8 @@ struct DatePickerExample01 { ...@@ -84,7 +85,8 @@ struct DatePickerExample01 {
### 日期选择器（不显示农历） ### 日期选择器（不显示农历）
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DatePickerExample02 { struct DatePickerExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 8aeebccc
...@@ -39,7 +39,8 @@ Divider() ...@@ -39,7 +39,8 @@ Divider()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DividerExample { struct DividerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ Gauge(value:{value: number, min?: number, max?: number}) ...@@ -44,7 +44,8 @@ Gauge(value:{value: number, min?: number, max?: number})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GaugeExample { struct GaugeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 8aeebccc
...@@ -63,7 +63,8 @@ ImageAnimator() ...@@ -63,7 +63,8 @@ ImageAnimator()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageAnimatorExample { struct ImageAnimatorExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ LoadingProgress() ...@@ -34,7 +34,8 @@ LoadingProgress()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LoadingProgressExample { struct LoadingProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole ...@@ -44,7 +44,8 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MarqueeExample { struct MarqueeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 8aeebccc
...@@ -26,37 +26,37 @@ Navigation() ...@@ -26,37 +26,37 @@ Navigation()
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面标题。 | | title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 | | subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面右上角菜单。 | | menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 | | titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 | | toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 | | hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 | | hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 | | hideBackButton | boolean | false | 隐藏返回键。 |
- NavigationMenuItem类型接口说明 - NavigationMenuItem类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 | | 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 | | value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 | | icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 | | action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- Object类型接口说明 - Object类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 | | 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 | | value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 | | icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 | | action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- NavigationTitleMode枚举说明 - NavigationTitleMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式（图标+主副标题）。 | | Mini | 固定为小标题模式（图标+主副标题）。 |
| Full | 固定为大标题模式（主副标题）。 | | Full | 固定为大标题模式（主副标题）。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 目前可滚动组件只支持List。 > 目前可滚动组件只支持List。
...@@ -64,15 +64,15 @@ Navigation() ...@@ -64,15 +64,15 @@ Navigation()
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | | onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
## 示例 ## 示例
``` ```ts
// Example 01 // xxx.ets
@Entry @Entry
@Component @Component
struct NavigationExample { struct NavigationExample {
...@@ -159,8 +159,8 @@ struct NavigationExample { ...@@ -159,8 +159,8 @@ struct NavigationExample {
![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif) ![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
``` ```ts
// Example 02 // xxx.ets
@Entry @Entry
@Component @Component
struct ToolbarBuilderExample { struct ToolbarBuilderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
浏览文件 @ 8aeebccc
...@@ -18,29 +18,29 @@ PatternLock(controller?: PatternLockController) ...@@ -18,29 +18,29 @@ PatternLock(controller?: PatternLockController)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ---------- | ----------------------------------------------- | ---- | ------ | -------------------------------------------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------- |
| controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件状态重置。 | | controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件状态重置。 |
## 属性 ## 属性
不支持`backgroundColor`以外的通用属性设置。 不支持`backgroundColor`以外的通用属性设置。
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| --------------- | --------------------------------------------------- | ----------- | ------------------------------------------------------------ | | --------------- | ------------------------------------- | ----------- | ---------------------------------------- |
| sideLength | Length | 300vp | 设置组件的宽度和高度（相同值）。最小可以设置为0。 | | sideLength | Length | 300vp | 设置组件的宽度和高度（相同值）。最小可以设置为0。 |
| circleRadius | Length | 14vp | 设置宫格圆点的半径。 | | circleRadius | Length | 14vp | 设置宫格圆点的半径。 |
| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 | | regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 | | selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 |
| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 | | activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 |
| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 | | pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 |
| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 | | pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 |
| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 | | autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 |
## 事件 ## 事件
| 名称 | 描述 | | 名称 | 描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 | | onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 |
## PatternLockController ## PatternLockController
...@@ -61,7 +61,8 @@ reset(): void ...@@ -61,7 +61,8 @@ reset(): void
## 示例 ## 示例
```typescript ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PatternLockExample { struct PatternLockExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
浏览文件 @ 8aeebccc
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - 本组件均为系统接口，三方应用不支持调用。 > - 本组件均为系统接口，三方应用不支持调用。
...@@ -27,23 +27,23 @@ PluginComponent(value: { template: PluginComponentTemplate, data: any }) ...@@ -27,23 +27,23 @@ PluginComponent(value: { template: PluginComponentTemplate, data: any })
创建插件组件，用于显示外部应用提供的UI。 创建插件组件，用于显示外部应用提供的UI。
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 | | value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
- PluginComponentTemplate类型说明 - PluginComponentTemplate类型说明
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | ------ | ----------------------- |
| source | string | 组件模板名。 | | source | string | 组件模板名。 |
| ability | string | 提供者Ability的abilityname。 | | ability | string | 提供者Ability的abilityname。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。 | | onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。 |
| onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 | | onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 |
## PluginComponentManager ## PluginComponentManager
...@@ -67,18 +67,18 @@ push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void ...@@ -67,18 +67,18 @@ push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
- 参数 - 参数
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | ------------------------- | ---- | -------------------------------- |
| param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 | | param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 | | callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
- PushParameters参数说明 - PushParameters参数说明
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | --------- | -------- | ---- | --------------- |
| want | Want | 是 | 组件使用者Ability信息。 | | want | Want | 是 | 组件使用者Ability信息。 |
| name | string | 是 | 组件名称。 | | name | string | 是 | 组件名称。 |
| data | KVObject | 否 | 组件数据值。 | | data | KVObject | 否 | 组件数据值。 |
| extraData | KVObject | 否 | 附加数据值。 | | extraData | KVObject | 否 | 附加数据值。 |
- 示例 - 示例
见[组件使用者调用接口](#组件使用者调用接口)示例。 见[组件使用者调用接口](#组件使用者调用接口)示例。
...@@ -91,29 +91,29 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara ...@@ -91,29 +91,29 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara
组件使用者向组件提供者主动请求组件。 组件使用者向组件提供者主动请求组件。
- 参数 - 参数
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | ---------------------------------------- | ---- | ------------------------------------ |
| param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 | | param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。 | | callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。 |
- RequestParameters参数说明 - RequestParameters参数说明
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | ---- | -------- | ---- | --------------- |
| want | Want | 是 | 组件提供者Ability信息。 | | want | Want | 是 | 组件提供者Ability信息。 |
| name | string | 是 | 请求组件名称。 | | name | string | 是 | 请求组件名称。 |
| data | KVObject | 是 | 附加数据。 | | data | KVObject | 是 | 附加数据。 |
- RequestCallbackParameters说明 - RequestCallbackParameters说明
| 名称 | 类型 | 说明 | | 名称 | 类型 | 说明 |
| -------- | -------- | -------- | | ----------------- | ----------------------- | ----- |
| componentTemplate | PluginComponentTemplate | 组件模板。 | | componentTemplate | PluginComponentTemplate | 组件模板。 |
| data | KVObject | 组件数据。 | | data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 | | extraData | KVObject | 附加数据。 |
- KVObject类型说明 - KVObject类型说明
| 参数 | 类型 | 说明 | | 参数 | 类型 | 说明 |
| -------- | -------- | -------- | | ---- | ---------------------------------------- | ---------------------------------------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 | | key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 |
- 示例 - 示例
...@@ -127,23 +127,23 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v ...@@ -127,23 +127,23 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v
提供者监听"request"类型的事件，给使用者返回通过request接口主动请求的数据；使用者监听"push"类型的事件，接收提供者通过push接口主动推送的数据。 提供者监听"request"类型的事件，给使用者返回通过request接口主动请求的数据；使用者监听"push"类型的事件，接收提供者通过push接口主动推送的数据。
- 参数 - 参数
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 | | eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 | | callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
- callback事件说明 - callback事件说明
| 参数名 | 类型 | 说明 | | 参数名 | 类型 | 说明 |
| -------- | -------- | -------- | | ---------------------- | ---------------------------------------- | ---------------------------------------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 | | OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 | | OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
- RequestEventResult类型说明 - RequestEventResult类型说明
| 参数 | 类型 | 说明 | | 参数 | 类型 | 说明 |
| -------- | -------- | -------- | | --------- | -------- | ----- |
| template | string | 组件名称。 | | template | string | 组件名称。 |
| data | KVObject | 组件数据。 | | data | KVObject | 组件数据。 |
| extraData | KVObjec | 附加数据。 | | extraData | KVObjec | 附加数据。 |
- 示例 - 示例
见[组件使用者调用接口](#组件使用者调用接口)示例。 见[组件使用者调用接口](#组件使用者调用接口)示例。
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 8aeebccc
...@@ -52,7 +52,8 @@ Progress(value: {value: number, total?: number, type?: ProgressType}) ...@@ -52,7 +52,8 @@ Progress(value: {value: number, total?: number, type?: ProgressType})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ProgressExample { struct ProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
浏览文件 @ 8aeebccc
...@@ -41,7 +41,8 @@ QRCode(value: string) ...@@ -41,7 +41,8 @@ QRCode(value: string)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QRCodeExample { struct QRCodeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ Radio(options: {value: string, group: string}) ...@@ -44,7 +44,8 @@ Radio(options: {value: string, group: string})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RadioExample { struct RadioExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ 8aeebccc
...@@ -46,7 +46,8 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -46,7 +46,8 @@ Rating(options?: { rating: number, indicator?: boolean })
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RatingExample { struct RatingExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 8aeebccc
...@@ -49,7 +49,8 @@ RichText\(content:string\) ...@@ -49,7 +49,8 @@ RichText\(content:string\)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RichTextExample { struct RichTextExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 8aeebccc
...@@ -49,7 +49,8 @@ ScrollBar(value: ScrollBarOptions) ...@@ -49,7 +49,8 @@ ScrollBar(value: ScrollBarOptions)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ScrollBarExample { struct ScrollBarExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 8aeebccc
...@@ -69,7 +69,8 @@ creatPosition(value: number): void ...@@ -69,7 +69,8 @@ creatPosition(value: number): void
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 8aeebccc
...@@ -46,7 +46,8 @@ Select(options: Array\<SelectOption\>) ...@@ -46,7 +46,8 @@ Select(options: Array\<SelectOption\>)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SelectExample { struct SelectExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 8aeebccc
...@@ -70,7 +70,8 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: ...@@ -70,7 +70,8 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 8aeebccc
...@@ -47,7 +47,8 @@ Span(content: string) ...@@ -47,7 +47,8 @@ Span(content: string)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SpanExample { struct SpanExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 8aeebccc
...@@ -45,7 +45,8 @@ Stepper(value?: { index?: number }) ...@@ -45,7 +45,8 @@ Stepper(value?: { index?: number })
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StepperExample { struct StepperExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 8aeebccc
...@@ -84,7 +84,8 @@ Text(content?: string) ...@@ -84,7 +84,8 @@ Text(content?: string)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextExample1 { struct TextExample1 {
...@@ -122,7 +123,8 @@ struct TextExample1 { ...@@ -122,7 +123,8 @@ struct TextExample1 {
![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif) ![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif)
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextExample2 { struct TextExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 8aeebccc
...@@ -85,7 +85,8 @@ caretPosition(value: number): void ...@@ -85,7 +85,8 @@ caretPosition(value: number): void
### 多行文本输入 ### 多行文本输入
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextAreaExample1 { struct TextAreaExample1 {
...@@ -120,7 +121,8 @@ struct TextAreaExample1 { ...@@ -120,7 +121,8 @@ struct TextAreaExample1 {
### 设置光标 ### 设置光标
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextAreaExample2 { struct TextAreaExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 8aeebccc
...@@ -97,7 +97,8 @@ caretPosition(value:&nbsp;number): void ...@@ -97,7 +97,8 @@ caretPosition(value:&nbsp;number): void
### 单行文本输入 ### 单行文本输入
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextInputExample1 { struct TextInputExample1 {
...@@ -131,7 +132,8 @@ struct TextInputExample1 { ...@@ -131,7 +132,8 @@ struct TextInputExample1 {
### 设置光标 ### 设置光标
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextInputExample2 { struct TextInputExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 8aeebccc
...@@ -46,7 +46,8 @@ TextPicker(value: {range: string[], selected?: number}) ...@@ -46,7 +46,8 @@ TextPicker(value: {range: string[], selected?: number})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextPickerExample { struct TextPickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 8aeebccc
...@@ -74,7 +74,8 @@ reset() ...@@ -74,7 +74,8 @@ reset()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextTimerExample { struct TextTimerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 8aeebccc
...@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions) ...@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions)
### 时间选择器 ### 时间选择器
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerExample { struct TimePickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ 8aeebccc
...@@ -50,7 +50,8 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) ...@@ -50,7 +50,8 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ToggleExample { struct ToggleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 8aeebccc
...@@ -31,22 +31,22 @@ ...@@ -31,22 +31,22 @@
> - 仅支持本地音视频播放。 > - 仅支持本地音视频播放。
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | ---------------------------------------- | -------------- | ---------------------------------------- | | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| domStorageAccess | boolean | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 | | domStorageAccess | boolean | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 |
| fileAccess | boolean | false | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 | | fileAccess | boolean | false | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 |
| fileFromUrlAccess | boolean | true | 设置是否允许通过网页中的JavaScript脚本访问[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)的内容，默认未启用。 | | fileFromUrlAccess | boolean | true | 设置是否允许通过网页中的JavaScript脚本访问[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)的内容，默认未启用。 |
| imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 | | imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 |
| javaScriptProxy | { <br> object: object, <br/> name: string, <br/> methodList: Array\<string\>, <br/> controller: WebController <br>} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。 <br/> object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。<br/> name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。<br/> methodList: 参与注册的应用侧JavaScript对象的方法。<br/> controller: 控制器。 | | javaScriptProxy | { <br> object: object, <br/> name: string, <br/> methodList: Array\<string\>, <br/> controller: WebController <br>} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。 <br/> object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。<br/> name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。<br/> methodList: 参与注册的应用侧JavaScript对象的方法。<br/> controller: 控制器。 |
| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 | | javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 |
| mixedMode | [MixedMode](#mixedmode枚举说明) | MixedMode.None | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 | | mixedMode | [MixedMode](#mixedmode枚举说明) | MixedMode.None | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 | | onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
| zoomAccess | boolean | true | 设置是否支持手势进行缩放，默认允许执行缩放。| | zoomAccess | boolean | true | 设置是否支持手势进行缩放，默认允许执行缩放。 |
| overviewModeAccess | boolean | true | 设置是否使用概览模式加载网页，默认使用该方式。| | overviewModeAccess | boolean | true | 设置是否使用概览模式加载网页，默认使用该方式。 |
| databaseAccess| boolean | false | 设置是否开启数据库存储API权限，默认不开启。| | databaseAccess | boolean | false | 设置是否开启数据库存储API权限，默认不开启。 |
| cacheMode | [CacheMode](#cachemode枚举说明) | CacheMode.Default| 设置缓存模式。| | cacheMode | [CacheMode](#cachemode枚举说明) | CacheMode.Default | 设置缓存模式。 |
| textZoomAtio | number | 100 | 设置页面的文本缩放百分比，默认为100%。 | | textZoomAtio | number | 100 | 设置页面的文本缩放百分比，默认为100%。 |
| userAgent | string | - | 设置用户代理。 | | userAgent | string | - | 设置用户代理。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> >
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
不支持通用事件。 不支持通用事件。
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页触发alert()告警弹窗时触发回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> | | onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页触发alert()告警弹窗时触发回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> |
| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>刷新或关闭场景下，在即将离开当前页面时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> | | onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>刷新或关闭场景下，在即将离开当前页面时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> |
| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页调用confirm()告警时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> | | onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页调用confirm()告警时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> |
...@@ -65,8 +65,8 @@ ...@@ -65,8 +65,8 @@
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>网页的下载任务开始时触发该回调。<br />url：文件下载的URL。<br />userAgent：下载的用户代理（UA）名称。<br />contentDisposition：服务器返回的 Content-Disposition响应头，可能为空。<br />mimetype：服务器返回内容媒体类型（MIME）信息。<br />contentLength：服务器返回文件的长度。</p> | | onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>网页的下载任务开始时触发该回调。<br />url：文件下载的URL。<br />userAgent：下载的用户代理（UA）名称。<br />contentDisposition：服务器返回的 Content-Disposition响应头，可能为空。<br />mimetype：服务器返回内容媒体类型（MIME）信息。<br />contentLength：服务器返回文件的长度。</p> |
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), error: [WebResourceError](#webresourceerror对象说明) }) => void) | <p>网页加载遇到错误时触发该回调。<br/>出于性能考虑，建议此回调中尽量执行简单逻辑。<br/>request：网页请求的封装信息。<br/>error：网页加载资源错误的封装信息 。</p> | | onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), error: [WebResourceError](#webresourceerror对象说明) }) => void) | <p>网页加载遇到错误时触发该回调。<br/>出于性能考虑，建议此回调中尽量执行简单逻辑。<br/>request：网页请求的封装信息。<br/>error：网页加载资源错误的封装信息 。</p> |
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), response: [WebResourceResponse](#webresourceresponse对象说明) }) => void) | <p>网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。<br/>request：网页请求的封装信息。<br/>response：网页响应的封装信息</p> | | onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), response: [WebResourceResponse](#webresourceresponse对象说明) }) => void) | <p>网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。<br/>request：网页请求的封装信息。<br/>response：网页响应的封装信息</p> |
| onPageBegin(callback: (event?: { url: string }) => void) | <p>网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。<br/>url：页面的URL地址。</p> | | onPageBegin(callback: (event?: { url: string }) => void) | <p>网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。<br/>url：页面的URL地址。</p> |
| onPageEnd(callback: (event?: { url: string }) => void) | <p>网页加载完成时触发该回调，且只在主frame触发。<br/>url：页面的URL地址。</p> | | onPageEnd(callback: (event?: { url: string }) => void) | <p>网页加载完成时触发该回调，且只在主frame触发。<br/>url：页面的URL地址。</p> |
| onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>网页加载进度变化时触发该回调。<br/>newProgress：新的加载进度，取值范围为0到100的整数。</p> | | onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>网页加载进度变化时触发该回调。<br/>newProgress：新的加载进度，取值范围为0到100的整数。</p> |
| onTitleReceive(callback: (event?: { title: string }) => void) | <p>网页document标题更改时触发该回调。<br/>title：document标题内容。</p> | | onTitleReceive(callback: (event?: { title: string }) => void) | <p>网页document标题更改时触发该回调。<br/>title：document标题内容。</p> |
| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。<br/>url：访问的url。<br/>isRefreshed：true表示该页面是被重新加载的，false表示该页面是新加载的。</p> | | onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。<br/>url：访问的url。<br/>isRefreshed：true表示该页面是被重新加载的，false表示该页面是新加载的。</p> |
...@@ -156,56 +156,56 @@ Web组件返回的请求/响应头对象。 ...@@ -156,56 +156,56 @@ Web组件返回的请求/响应头对象。
onRenderExited接口返回的渲染进程退出的具体原因。 onRenderExited接口返回的渲染进程退出的具体原因。
| 名称 | 描述 | | 名称 | 描述 |
| ---------------------------- | ------------------------------ | | -------------------------- | ----------------- |
| ProcessAbnormalTermination | 渲染进程异常退出。 | | ProcessAbnormalTermination | 渲染进程异常退出。 |
| ProcessWasKilled | 收到SIGKILL，或被手动终止。 | | ProcessWasKilled | 收到SIGKILL，或被手动终止。 |
| ProcessCrashed | 渲染进程崩溃退出，如段错误。 | | ProcessCrashed | 渲染进程崩溃退出，如段错误。 |
| ProcessOom | 程序内存不足。 | | ProcessOom | 程序内存不足。 |
| ProcessExitUnknown | 其他原因。 | | ProcessExitUnknown | 其他原因。 |
### MixedMode枚举说明 ### MixedMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---------- | ---------------------------------- | | ---------- | ---------------------------------- |
| All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 | | All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
| Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 | | Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 |
| None | 不允许加载HTTP和HTTPS混合内容。 | | None | 不允许加载HTTP和HTTPS混合内容。 |
### CacheMode枚举说明 ### CacheMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---------- | ---------------------------------- | | ------- | ------------------------------------ |
| Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 | | Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
| None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 | | None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 |
| Online | 加载资源不使用cache，全部从网络中获取。 | | Online | 加载资源不使用cache，全部从网络中获取。 |
| Only | 只从cache中加载资源。 | | Only | 只从cache中加载资源。 |
### FileSelectorResult对象说明 ### FileSelectorResult对象说明
通知Web组件的文件选择结果。 通知Web组件的文件选择结果。
- 接口 - 接口
| 接口名称 | 功能描述 | | 接口名称 | 功能描述 |
| ---------------------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | -------------------------------------- |
| handleFileList(fileList: Array\<string>): void | 通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。 | | handleFileList(fileList: Array\<string>): void | 通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。 |
### FileSelectorParam对象说明 ### FileSelectorParam对象说明
- 接口 - 接口
| 接口名称 | 功能描述 | | 接口名称 | 功能描述 |
| ---------------------------------------- | ------------------ | | -------------------------------- | ------------ |
| getTitle(): string | 获取文件选择器标题。 | | getTitle(): string | 获取文件选择器标题。 |
| getMode(): FileSelectorMode | 获取文件选择器的模式。 | | getMode(): FileSelectorMode | 获取文件选择器的模式。 |
| getAcceptType(): Array\<string\> | 获取文件过滤类型。 | | getAcceptType(): Array\<string\> | 获取文件过滤类型。 |
| isCapture(): boolean | 获取是否调用多媒体能力。 | | isCapture(): boolean | 获取是否调用多媒体能力。 |
### FileSelectorMode枚举说明 ### FileSelectorMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---------------------------- | ------------------------------ | | -------------------- | ---------- |
| FileOpenMode | 打开上传单个文件。 | | FileOpenMode | 打开上传单个文件。 |
| FileOpenMultipleMode | 打开上传多个文件。 | | FileOpenMultipleMode | 打开上传多个文件。 |
| FileOpenFolderMode | 打开上传文件夹模式。 | | FileOpenFolderMode | 打开上传文件夹模式。 |
| FileSaveMode | 文件保存模式。 | | FileSaveMode | 文件保存模式。 |
## WebController ## WebController
...@@ -389,8 +389,8 @@ getCookieManager(): WebCookie ...@@ -389,8 +389,8 @@ getCookieManager(): WebCookie
获取web组件cookie管理对象。 获取web组件cookie管理对象。
- 返回值 - 返回值
| 参数类型 | 说明 | | 参数类型 | 说明 |
| ------- | --------- | | --------- | ---------------------------------------- |
| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 | | WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 |
## WebCookie ## WebCookie
通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。 通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
...@@ -401,13 +401,13 @@ setCookie(url: string, value: string): boolean ...@@ -401,13 +401,13 @@ setCookie(url: string, value: string): boolean
- 参数说明 - 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------------------ | ---- | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---- | ----------------- |
| url | string | 是 | - | 要设置的cookie所属的url。 | | url | string | 是 | - | 要设置的cookie所属的url。 |
| value | string | 是 | - | cookie的值。 | | value | string | 是 | - | cookie的值。 |
- 返回值 - 返回值
| 参数类型 | 说明 | | 参数类型 | 说明 |
| ------- | --------- | | ------- | ------------- |
| boolean | 设置cookie是否成功。 | | boolean | 设置cookie是否成功。 |
### saveCookieSync ### saveCookieSync
...@@ -415,12 +415,12 @@ saveCookieSync(): boolean ...@@ -415,12 +415,12 @@ saveCookieSync(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
- 返回值 - 返回值
| 参数类型 | 说明 | | 参数类型 | 说明 |
| ------- | --------- | | ------- | -------------------- |
| boolean | 同步内存cookie到磁盘操作是否成功。 | | boolean | 同步内存cookie到磁盘操作是否成功。 |
## 示例 ## 示例
``` ```ts
// webComponent.ets // webComponent.ets
@Entry @Entry
@Component @Component
...@@ -442,7 +442,7 @@ struct WebComponent { ...@@ -442,7 +442,7 @@ struct WebComponent {
} }
} }
``` ```
``` ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 8aeebccc
...@@ -19,20 +19,20 @@ ...@@ -19,20 +19,20 @@
- 参数 - 参数
| 名称 | 参数类型 | 必填 | 描述 | | 名称 | 参数类型 | 必填 | 描述 |
| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | | ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | | id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
| type | string | 是 | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。| | type | string | 是 | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。 |
| libraryname | string | 否 | 应用Native层编译输出动态库名称。 | | libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
| controller | [XComponentController](#XComponentController) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法。 | | controller | [XComponentController](#XComponentController) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ------------------------------- | ------------------------ | | -------------------------------- | ------------ |
| onLoad(context?: object) => void | 插件加载完成时回调事件。 | | onLoad(context?: object) => void | 插件加载完成时回调事件。 |
| onDestroy() => void | 插件卸载完成时回调事件。 | | onDestroy() => void | 插件卸载完成时回调事件。 |
## XComponentController ## XComponentController
...@@ -52,8 +52,8 @@ getXComponentSurfaceId(): string ...@@ -52,8 +52,8 @@ getXComponentSurfaceId(): string
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| ------ | --------------------------- | | ------ | ----------------------- |
| string | XComponent持有Surface的ID。 | | string | XComponent持有Surface的ID。 |
### setXComponentSurfaceSize ### setXComponentSurfaceSize
...@@ -64,10 +64,10 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): ...@@ -64,10 +64,10 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ------------- | -------- | ---- | ------ | ----------------------------- | | ------------- | ------ | ---- | ---- | ----------------------- |
| surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 | | surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 | | surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
### getXComponentContext ### getXComponentContext
...@@ -77,15 +77,16 @@ getXComponentContext(): Object ...@@ -77,15 +77,16 @@ getXComponentContext(): Object
- 返回值 - 返回值
| 类型 | 描述 | | 类型 | 描述 |
| ------ | ------------------------------------------------------------ | | ------ | ---------------------------------------- |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 | | Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
## 示例 ## 示例
提供surface类型XComponent，支持相机预览等能力。 提供surface类型XComponent，支持相机预览等能力。
``` ```ts
// xxx.ets
import camera from '@ohos.multimedia.camera'; import camera from '@ohos.multimedia.camera';
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 8aeebccc
...@@ -37,7 +37,8 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb ...@@ -37,7 +37,8 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LongPressGestureExample { struct LongPressGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 8aeebccc
...@@ -68,7 +68,8 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan ...@@ -68,7 +68,8 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PanGestureExample { struct PanGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 8aeebccc
...@@ -39,7 +39,8 @@ PinchGesture(options?: { fingers?: number, distance?: number }) ...@@ -39,7 +39,8 @@ PinchGesture(options?: { fingers?: number, distance?: number })
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PinchGestureExample { struct PinchGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 8aeebccc
...@@ -37,7 +37,8 @@ RotationGesture(options?: { fingers?: number, angle?: number }) ...@@ -37,7 +37,8 @@ RotationGesture(options?: { fingers?: number, angle?: number })
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RotationGestureExample { struct RotationGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num ...@@ -44,7 +44,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png) ![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SwipeGestureExample { struct SwipeGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 8aeebccc
...@@ -29,7 +29,8 @@ TapGesture(options?: { count?: number, fingers?: number }) ...@@ -29,7 +29,8 @@ TapGesture(options?: { count?: number, fingers?: number })
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TapGestureExample { struct TapGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 8aeebccc
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
CanvasRenderingContext2D(setting: RenderingContextSetting) CanvasRenderingContext2D(setting: RenderingContextSetting)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings ### RenderingContextSettings
...@@ -24,33 +24,33 @@ RenderingContextSettings(antialias?: bool) ...@@ -24,33 +24,33 @@ RenderingContextSettings(antialias?: bool)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---- | ---- | ----- | ---------------- |
| antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | | [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | | [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | | [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | | [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 | | [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 | | [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | | [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | | [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | | [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | | [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | | [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 |
| [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 | | [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | | [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | | [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 | | imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 > &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
...@@ -58,7 +58,8 @@ RenderingContextSettings(antialias?: bool) ...@@ -58,7 +58,8 @@ RenderingContextSettings(antialias?: bool)
### fillStyle ### fillStyle
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
...@@ -87,7 +88,8 @@ struct FillStyleExample { ...@@ -87,7 +88,8 @@ struct FillStyleExample {
### lineWidth ### lineWidth
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
...@@ -116,7 +118,8 @@ struct LineWidthExample { ...@@ -116,7 +118,8 @@ struct LineWidthExample {
### strokeStyle ### strokeStyle
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
...@@ -147,7 +150,8 @@ struct StrokeStyleExample { ...@@ -147,7 +150,8 @@ struct StrokeStyleExample {
### lineCap ### lineCap
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
...@@ -180,7 +184,8 @@ struct LineCapExample { ...@@ -180,7 +184,8 @@ struct LineCapExample {
### lineJoin ### lineJoin
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
...@@ -214,7 +219,8 @@ struct LineJoinExample { ...@@ -214,7 +219,8 @@ struct LineJoinExample {
### miterLimit ### miterLimit
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
...@@ -248,7 +254,8 @@ struct MiterLimit { ...@@ -248,7 +254,8 @@ struct MiterLimit {
### font ### font
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Font { struct Font {
...@@ -277,7 +284,8 @@ struct Font { ...@@ -277,7 +284,8 @@ struct Font {
### textAlign ### textAlign
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -321,7 +329,8 @@ struct CanvasExample { ...@@ -321,7 +329,8 @@ struct CanvasExample {
### textBaseline ### textBaseline
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
...@@ -365,7 +374,8 @@ struct TextBaseline { ...@@ -365,7 +374,8 @@ struct TextBaseline {
### globalAlpha ### globalAlpha
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
...@@ -397,7 +407,8 @@ struct GlobalAlpha { ...@@ -397,7 +407,8 @@ struct GlobalAlpha {
### lineDashOffset ### lineDashOffset
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
...@@ -427,21 +438,22 @@ struct LineDashOffset { ...@@ -427,21 +438,22 @@ struct LineDashOffset {
### globalCompositeOperation ### globalCompositeOperation
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | | source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
| source-atop | 在现有绘制内容顶部显示新绘制内容。 | | source-atop | 在现有绘制内容顶部显示新绘制内容。 |
| source-in | 在现有绘制内容中显示新绘制内容。 | | source-in | 在现有绘制内容中显示新绘制内容。 |
| source-out | 在现有绘制内容之外显示新绘制内容。 | | source-out | 在现有绘制内容之外显示新绘制内容。 |
| destination-over | 在新绘制内容上方显示现有绘制内容。 | | destination-over | 在新绘制内容上方显示现有绘制内容。 |
| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | | destination-atop | 在新绘制内容顶部显示现有绘制内容。 |
| destination-in | 在新绘制内容中显示现有绘制内容。 | | destination-in | 在新绘制内容中显示现有绘制内容。 |
| destination-out | 在新绘制内容外显示现有绘制内容。 | | destination-out | 在新绘制内容外显示现有绘制内容。 |
| lighter | 显示新绘制内容和现有绘制内容。 | | lighter | 显示新绘制内容和现有绘制内容。 |
| copy | 显示新绘制内容而忽略现有绘制内容。 | | copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | | xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
...@@ -478,7 +490,8 @@ struct GlobalCompositeOperation { ...@@ -478,7 +490,8 @@ struct GlobalCompositeOperation {
### shadowBlur ### shadowBlur
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
...@@ -509,7 +522,8 @@ struct ShadowBlur { ...@@ -509,7 +522,8 @@ struct ShadowBlur {
### shadowColor ### shadowColor
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
...@@ -540,7 +554,8 @@ struct ShadowColor { ...@@ -540,7 +554,8 @@ struct ShadowColor {
### shadowOffsetX ### shadowOffsetX
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
...@@ -572,7 +587,8 @@ struct ShadowOffsetX { ...@@ -572,7 +587,8 @@ struct ShadowOffsetX {
### shadowOffsetY ### shadowOffsetY
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
...@@ -603,7 +619,8 @@ struct ShadowOffsetY { ...@@ -603,7 +619,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled ### imageSmoothingEnabled
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
...@@ -641,15 +658,16 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -641,15 +658,16 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。 填充一个矩形。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
...@@ -682,15 +700,16 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -682,15 +700,16 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。 绘制具有边框的矩形，矩形内部不填充。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
...@@ -722,15 +741,16 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -722,15 +741,16 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。 删除指定区域内的绘制内容。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
...@@ -764,14 +784,15 @@ fillText(text: string, x: number, y: number): void ...@@ -764,14 +784,15 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。 绘制填充类文本。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
...@@ -804,14 +825,15 @@ strokeText(text: string, x: number, y: number): void ...@@ -804,14 +825,15 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。 绘制描边类文本。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
...@@ -844,22 +866,23 @@ measureText(text: string): TextMetrics ...@@ -844,22 +866,23 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 | | text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述 - TextMetrics类型描述
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | width | number | 字符串的宽度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
...@@ -893,18 +916,19 @@ stroke(path?: Path2D): void ...@@ -893,18 +916,19 @@ stroke(path?: Path2D): void
进行边框绘制操作。 进行边框绘制操作。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -934,13 +958,14 @@ beginPath(): void ...@@ -934,13 +958,14 @@ beginPath(): void
创建一个新的绘制路径。 创建一个新的绘制路径。
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -972,19 +997,20 @@ moveTo(x: number, y: number): void ...@@ -972,19 +997,20 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。 路径从当前点移动到指定点。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1014,19 +1040,20 @@ lineTo(x: number, y: number): void ...@@ -1014,19 +1040,20 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。 从当前点到指定点进行路径连接。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1056,13 +1083,14 @@ closePath(): void ...@@ -1056,13 +1083,14 @@ closePath(): void
结束当前路径形成一个封闭路径。 结束当前路径形成一个封闭路径。
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1094,20 +1122,21 @@ createPattern(image: ImageBitmap, repetition: string): void ...@@ -1094,20 +1122,21 @@ createPattern(image: ImageBitmap, repetition: string): void
通过指定图像和重复方式创建图片填充的模板。 通过指定图像和重复方式创建图片填充的模板。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1136,23 +1165,24 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1136,23 +1165,24 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1182,15 +1212,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1182,15 +1212,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
...@@ -1225,23 +1256,24 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1225,23 +1256,24 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。 绘制弧线路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 | | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1270,22 +1302,23 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1270,22 +1302,23 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1314,26 +1347,27 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1314,26 +1347,27 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。 在规定的矩形区域绘制一个椭圆。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1351,7 +1385,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1351,7 +1385,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
} }
} }
``` ```
![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png) ![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png)
...@@ -1362,21 +1396,22 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1362,21 +1396,22 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。 创建矩形路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1404,13 +1439,14 @@ fill(): void ...@@ -1404,13 +1439,14 @@ fill(): void
对封闭路径进行填充。 对封闭路径进行填充。
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1438,13 +1474,14 @@ clip(): void ...@@ -1438,13 +1474,14 @@ clip(): void
设置当前路径为剪切路径。 设置当前路径为剪切路径。
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1464,7 +1501,7 @@ clip(): void ...@@ -1464,7 +1501,7 @@ clip(): void
} }
} }
``` ```
![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png) ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png)
...@@ -1475,18 +1512,19 @@ rotate(rotate: number): void ...@@ -1475,18 +1512,19 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。 针对当前坐标轴进行顺时针旋转。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1514,19 +1552,20 @@ scale(x: number, y: number): void ...@@ -1514,19 +1552,20 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1556,29 +1595,30 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1556,29 +1595,30 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
> >
> - x' = scaleX \* x + skewY \* y + translateX > - x' = scaleX \* x + skewY \* y + translateX
> >
> - y' = skewX \* x + scaleY \* y + translateY > - y' = skewX \* x + scaleY \* y + translateY
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 | | scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 | | translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 | | translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1612,23 +1652,24 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl ...@@ -1612,23 +1652,24 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 | | scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 | | translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 | | translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1659,19 +1700,20 @@ translate(x: number, y: number): void ...@@ -1659,19 +1700,20 @@ translate(x: number, y: number): void
移动当前坐标系的原点。 移动当前坐标系的原点。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1704,21 +1746,22 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ...@@ -1704,21 +1746,22 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
进行图像绘制。 进行图像绘制。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---- | ---- | ----------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 | | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 | | dWidth | number | 否 | 0 | 绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 | | dHeight | number | 否 | 0 | 绘制区域的高度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
...@@ -1751,10 +1794,10 @@ createImageData(width: number, height: number): Object ...@@ -1751,10 +1794,10 @@ createImageData(width: number, height: number): Object
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 | | width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 | | height | number | 是 | 0 | ImageData的高度。 |
### createImageData ### createImageData
...@@ -1764,9 +1807,9 @@ createImageData(imageData: Object): Object ...@@ -1764,9 +1807,9 @@ createImageData(imageData: Object): Object
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ------ | ---- | ---- | ----------------- |
| imagedata | Object | 是 | null | 复制现有的ImageData对象。 | | imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
### getPixelMap ### getPixelMap
...@@ -1774,12 +1817,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -1774,12 +1817,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 |
### getImageData ### getImageData
...@@ -1787,12 +1830,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1787,12 +1830,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 |
### putImageData ### putImageData
...@@ -1802,24 +1845,25 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1802,24 +1845,25 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。 使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1853,13 +1897,14 @@ restore(): void ...@@ -1853,13 +1897,14 @@ restore(): void
对保存的绘图上下文进行恢复。 对保存的绘图上下文进行恢复。
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1884,13 +1929,14 @@ save(): void ...@@ -1884,13 +1929,14 @@ save(): void
对当前的绘图上下文进行保存。 对当前的绘图上下文进行保存。
- 示例 - 示例
``` ```ts
// xxx.ets
@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 }) {
Canvas(this.context) Canvas(this.context)
...@@ -1915,15 +1961,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -1915,15 +1961,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。 创建一个线性渐变色。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 | | x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 | | y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 | | x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 | | y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
...@@ -1961,17 +2008,18 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -1961,17 +2008,18 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。 创建一个径向渐变色。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 | | y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 | | x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 | | y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例 - 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 8aeebccc
...@@ -36,7 +36,8 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -36,7 +36,8 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GestureGroupExample { struct GestureGroupExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 8aeebccc
...@@ -36,7 +36,8 @@ Canvas(context: CanvasRenderingContext2D) ...@@ -36,7 +36,8 @@ Canvas(context: CanvasRenderingContext2D)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 8aeebccc
...@@ -20,8 +20,9 @@ addColorStop(offset: number, color: string): void ...@@ -20,8 +20,9 @@ addColorStop(offset: number, color: string): void
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 | | color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Page45 { struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 8aeebccc
...@@ -51,7 +51,8 @@ destroy(name: string): void ...@@ -51,7 +51,8 @@ destroy(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name,&nbsp;缺省时销毁所有动画。 | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name,&nbsp;缺省时销毁所有动画。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import lottie from '@ohos/lottieETS' import lottie from '@ohos/lottieETS'
@Entry @Entry
...@@ -130,7 +131,7 @@ play(name: string): void ...@@ -130,7 +131,7 @@ play(name: string): void
| name | string | 是 | 被指定的动画名,&nbsp;同loadAnimation接口参数name，缺省时播放所有动画。 | | name | string | 是 | 被指定的动画名,&nbsp;同loadAnimation接口参数name，缺省时播放所有动画。 |
- 示例 - 示例
``` ```ts
lottie.play(this.animateName) lottie.play(this.animateName)
``` ```
...@@ -147,7 +148,7 @@ pause(name: string): void ...@@ -147,7 +148,7 @@ pause(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | | name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 |
- 示例 - 示例
``` ```ts
lottie.pause(this.animateName) lottie.pause(this.animateName)
``` ```
...@@ -164,7 +165,7 @@ togglePause(name: string): void ...@@ -164,7 +165,7 @@ togglePause(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例 - 示例
``` ```ts
lottie.togglePause(this.animateName) lottie.togglePause(this.animateName)
``` ```
...@@ -181,7 +182,7 @@ stop(name: string): void ...@@ -181,7 +182,7 @@ stop(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例 - 示例
``` ```ts
lottie.stop(this.animateName) lottie.stop(this.animateName)
``` ```
...@@ -199,7 +200,7 @@ setSpeed(speed: number, name: string): void ...@@ -199,7 +200,7 @@ setSpeed(speed: number, name: string): void
| name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 | | name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例 - 示例
``` ```ts
lottie.setSpeed(5, this.animateName) lottie.setSpeed(5, this.animateName)
``` ```
...@@ -217,7 +218,7 @@ setDirection(direction: AnimationDirection, name: string): void ...@@ -217,7 +218,7 @@ setDirection(direction: AnimationDirection, name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 |
- 示例 - 示例
``` ```ts
lottie.setDirection(-1, this.animateName) lottie.setDirection(-1, this.animateName)
``` ```
...@@ -262,7 +263,7 @@ play(name?: string): void ...@@ -262,7 +263,7 @@ play(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
this.animateItem.play() this.animateItem.play()
``` ```
...@@ -279,7 +280,7 @@ destroy(name?: string): void ...@@ -279,7 +280,7 @@ destroy(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
this.animateItem.destroy() this.animateItem.destroy()
``` ```
...@@ -296,7 +297,7 @@ pause(name?: string): void ...@@ -296,7 +297,7 @@ pause(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
this.animateItem.pause() this.animateItem.pause()
``` ```
...@@ -313,7 +314,7 @@ togglePause(name?: string): void ...@@ -313,7 +314,7 @@ togglePause(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
this.animateItem.togglePause() this.animateItem.togglePause()
``` ```
...@@ -330,7 +331,7 @@ stop(name?: string): void ...@@ -330,7 +331,7 @@ stop(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
this.animateItem.stop() this.animateItem.stop()
``` ```
...@@ -347,7 +348,7 @@ setSpeed(speed: number): void ...@@ -347,7 +348,7 @@ setSpeed(speed: number): void
| speed | number | 是 | 值为浮点类型,&nbsp;speed&gt;0正向播放,&nbsp;speed&lt;0反向播放,&nbsp;speed=0暂停播放,&nbsp;speed=1.0&nbsp;\|&nbsp;-1.0正常速度播放。 | | speed | number | 是 | 值为浮点类型,&nbsp;speed&gt;0正向播放,&nbsp;speed&lt;0反向播放,&nbsp;speed=0暂停播放,&nbsp;speed=1.0&nbsp;\|&nbsp;-1.0正常速度播放。 |
- 示例 - 示例
``` ```ts
this.animateItem.setSpeed(5); this.animateItem.setSpeed(5);
``` ```
...@@ -364,7 +365,7 @@ setDirection(direction: AnimationDirection): void ...@@ -364,7 +365,7 @@ setDirection(direction: AnimationDirection): void
| direction | AnimationDirection | 是 | 1为正向，-1为反向;&nbsp;当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed&lt;0叠加时也是倒放。<br/>AnimationDirection：1&nbsp;\|&nbsp;-1。 | | direction | AnimationDirection | 是 | 1为正向，-1为反向;&nbsp;当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed&lt;0叠加时也是倒放。<br/>AnimationDirection：1&nbsp;\|&nbsp;-1。 |
- 示例 - 示例
``` ```ts
this.animateItem.setDirection(-1) this.animateItem.setDirection(-1)
``` ```
...@@ -383,7 +384,7 @@ goToAndStop(value: number, isFrame?: boolean): void ...@@ -383,7 +384,7 @@ goToAndStop(value: number, isFrame?: boolean): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
// 按帧号控制 // 按帧号控制
this.animateItem.goToAndStop(25, true) this.animateItem.goToAndStop(25, true)
// 按时间进度控制 // 按时间进度控制
...@@ -405,7 +406,7 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void ...@@ -405,7 +406,7 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例 - 示例
``` ```ts
// 按帧号控制 // 按帧号控制
this.animateItem.goToAndPlay(25, true) this.animateItem.goToAndPlay(25, true)
// 按时间进度控制 // 按时间进度控制
...@@ -426,7 +427,7 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean ...@@ -426,7 +427,7 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
- 示例 - 示例
``` ```ts
// 指定播放片段 // 指定播放片段
this.animateItem.playSegments([10, 20], false) this.animateItem.playSegments([10, 20], false)
// 指定播放片段列表 // 指定播放片段列表
...@@ -446,7 +447,7 @@ resetSegments(forceFlag: boolean): void ...@@ -446,7 +447,7 @@ resetSegments(forceFlag: boolean): void
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
- 示例 - 示例
``` ```ts
this.animateItem.resetSegments(true) this.animateItem.resetSegments(true)
``` ```
...@@ -458,7 +459,7 @@ resize(): void ...@@ -458,7 +459,7 @@ resize(): void
刷新动画布局。 刷新动画布局。
- 示例 - 示例
``` ```ts
this.animateItem.resize() this.animateItem.resize()
``` ```
...@@ -475,7 +476,7 @@ setSubframe(useSubFrame: boolean): void ...@@ -475,7 +476,7 @@ setSubframe(useSubFrame: boolean): void
| useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。<br/>true：属性currentFrame显示浮点。<br/>false：属性currentFrame去浮点数显示整数。 | | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。<br/>true：属性currentFrame显示浮点。<br/>false：属性currentFrame去浮点数显示整数。 |
- 示例 - 示例
``` ```ts
this.animateItem.setSubframe(false) this.animateItem.setSubframe(false)
``` ```
...@@ -492,7 +493,7 @@ getDuration(inFrames?: boolean): void ...@@ -492,7 +493,7 @@ getDuration(inFrames?: boolean): void
| inFrames | boolean | 否 | true：获取帧数，&nbsp;false：获取时间(单位ms)，缺省默认false。 | | inFrames | boolean | 否 | true：获取帧数，&nbsp;false：获取时间(单位ms)，缺省默认false。 |
- 示例 - 示例
``` ```ts
this.animateItem.getDuration(true) this.animateItem.getDuration(true)
``` ```
...@@ -510,7 +511,7 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve ...@@ -510,7 +511,7 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve
| callback | AnimationEventCallback&lt;T&gt; | 是 | 用户自定义回调函数 | | callback | AnimationEventCallback&lt;T&gt; | 是 | 用户自定义回调函数 |
- 示例 - 示例
``` ```ts
private callbackItem: any = function() { private callbackItem: any = function() {
console.log("grunt loopComplete") console.log("grunt loopComplete")
} }
...@@ -531,10 +532,10 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio ...@@ -531,10 +532,10 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio
| 参数 | 类型 | 必填 | 描述 | | 参数 | 类型 | 必填 | 描述 |
| -------- | ------------------------------- | ---- | ---------------------------------------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：<br/>'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：<br/>'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
| callback | AnimationEventCallback&lt;T&gt; | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 | | callback | AnimationEventCallback&lt;T&gt; | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 |
- 示例 - 示例
``` ```ts
this.animateItem.removeEventListener('loopComplete', this.animateName) this.animateItem.removeEventListener('loopComplete', this.animateName)
``` ```
...@@ -552,7 +553,7 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void ...@@ -552,7 +553,7 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
| args | any | 是 | 用户自定义回调参数 | | args | any | 是 | 用户自定义回调参数 |
- 示例 - 示例
``` ```ts
private triggerCallBack: any = function(item) { private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name) console.log("trigger loopComplete, name:" + item.name)
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 8aeebccc
...@@ -19,8 +19,9 @@ addPath(path: Object): void ...@@ -19,8 +19,9 @@ addPath(path: Object): void
| path | Object | 是 | null | 需要添加到当前路径的路径对象 | | path | Object | 是 | null | 需要添加到当前路径的路径对象 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct AddPath { struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -56,8 +57,9 @@ closePath(): void ...@@ -56,8 +57,9 @@ closePath(): void
将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -100,8 +102,9 @@ moveTo(x: number, y: number): void ...@@ -100,8 +102,9 @@ moveTo(x: number, y: number): void
| y | number | 是 | 0 | 目标点Y轴坐标 | | y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -144,8 +147,9 @@ lineTo(x: number, y: number): void ...@@ -144,8 +147,9 @@ lineTo(x: number, y: number): void
| y | number | 是 | 0 | 目标点Y轴坐标 | | y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -193,8 +197,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -193,8 +197,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -236,8 +241,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -236,8 +241,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -282,8 +288,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -282,8 +288,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -325,8 +332,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -325,8 +332,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -372,8 +380,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -372,8 +380,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | | anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -415,8 +424,9 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -415,8 +424,9 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 8aeebccc
...@@ -63,7 +63,8 @@ AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number}) ...@@ -63,7 +63,8 @@ AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AlphabetIndexerSample { struct AlphabetIndexerSample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 8aeebccc
...@@ -58,7 +58,8 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) ...@@ -58,7 +58,8 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BadgeExample { struct BadgeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 8aeebccc
...@@ -46,7 +46,8 @@ Column(value:{space?: Length}) ...@@ -46,7 +46,8 @@ Column(value:{space?: Length})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ColumnExample { struct ColumnExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ ColumnSplit() ...@@ -34,7 +34,8 @@ ColumnSplit()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ColumnSplitExample { struct ColumnSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ Counter() ...@@ -34,7 +34,8 @@ Counter()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CounterExample { struct CounterExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 8aeebccc
...@@ -24,44 +24,44 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -24,44 +24,44 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
标准Flex布局容器。 标准Flex布局容器。
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
| direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 | | direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
| wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 | | wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 |
| justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 | | justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 | | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
| alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 | | alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
- FlexDirection枚举说明 - FlexDirection枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------------- | ---------------- |
| Row | 主轴与行方向一致作为布局模式。 | | Row | 主轴与行方向一致作为布局模式。 |
| RowReverse | 与Row方向相反方向进行布局。 | | RowReverse | 与Row方向相反方向进行布局。 |
| Column | 主轴与列方向一致作为布局模式。 | | Column | 主轴与列方向一致作为布局模式。 |
| ColumnReverse | 与Column相反方向进行布局。 | | ColumnReverse | 与Column相反方向进行布局。 |
- FlexWrap枚举说明 - FlexWrap枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ----------- | --------------------------- |
| NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 | | NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 |
| Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 | | Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
| WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 | | WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
- FlexAlign枚举说明 - FlexAlign枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------------ | ---------------------------------------- |
| Start | 元素在主轴方向首端对齐,&nbsp;第一个元素与行首对齐，同时后续的元素与前一个对齐。 | | Start | 元素在主轴方向首端对齐,&nbsp;第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
| Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 | | Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
| End | 元素在主轴方向尾部对齐,&nbsp;&nbsp;最后一个元素与行尾对齐，其他元素与后一个对齐。 | | End | 元素在主轴方向尾部对齐,&nbsp;&nbsp;最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素与行首对齐，最后一个元素与行尾对齐。 | | SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素与行首对齐，最后一个元素与行尾对齐。 |
| SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 | | SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
| SpaceEvenly | Flex主轴方向元素等间距布局，&nbsp;相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 | | SpaceEvenly | Flex主轴方向元素等间距布局，&nbsp;相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
## 示例 ## 示例
``` ```ts
// Example 01 // xxx.ets
@Entry @Entry
@Component @Component
struct FlexExample1 { struct FlexExample1 {
...@@ -123,8 +123,8 @@ struct FlexExample1 { ...@@ -123,8 +123,8 @@ struct FlexExample1 {
![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif) ![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif)
``` ```ts
// Example 02 // xxx.ets
@Entry @Entry
@Component @Component
struct FlexExample2 { struct FlexExample2 {
...@@ -169,8 +169,8 @@ struct FlexExample2 { ...@@ -169,8 +169,8 @@ struct FlexExample2 {
![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png) ![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
``` ```ts
// Example 03 // xxx.ets
@Component @Component
struct JustifyContentFlex { struct JustifyContentFlex {
@Prop justifyContent : number @Prop justifyContent : number
...@@ -218,8 +218,8 @@ struct FlexExample3 { ...@@ -218,8 +218,8 @@ struct FlexExample3 {
![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif) ![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif)
``` ```ts
// Example 04 // xxx.ets
@Component @Component
struct AlignItemsFlex { struct AlignItemsFlex {
@Prop alignItems : number @Prop alignItems : number
...@@ -269,8 +269,8 @@ struct FlexExample4 { ...@@ -269,8 +269,8 @@ struct FlexExample4 {
![zh-cn_image_0000001219662653](figures/zh-cn_image_0000001219662653.gif) ![zh-cn_image_0000001219662653](figures/zh-cn_image_0000001219662653.gif)
``` ```ts
// Example 05 // xxx.ets
@Component @Component
struct AlignContentFlex { struct AlignContentFlex {
@Prop alignContent: number @Prop alignContent: number
......
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 8aeebccc
...@@ -56,7 +56,8 @@ Grid() ...@@ -56,7 +56,8 @@ Grid()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GridExample { struct GridExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
浏览文件 @ 8aeebccc
...@@ -51,7 +51,8 @@ GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter ...@@ -51,7 +51,8 @@ GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GridContainerExample { struct GridContainerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
浏览文件 @ 8aeebccc
...@@ -43,7 +43,8 @@ GridItem() ...@@ -43,7 +43,8 @@ GridItem()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GridItemExample { struct GridItemExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ 8aeebccc
...@@ -72,7 +72,8 @@ List(value:{space?: number, initialIndex?: number}) ...@@ -72,7 +72,8 @@ List(value:{space?: number, initialIndex?: number})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ListExample { struct ListExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @ 8aeebccc
...@@ -46,7 +46,8 @@ ListItem() ...@@ -46,7 +46,8 @@ ListItem()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ListItemExample { struct ListItemExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 8aeebccc
...@@ -24,31 +24,31 @@ Navigator(value?: {target: string, type?: NavigationType}) ...@@ -24,31 +24,31 @@ Navigator(value?: {target: string, type?: NavigationType})
创建路由组件。 创建路由组件。
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ---- | ------------------- | ------------ |
| target | string | 是 | - | 指定跳转目标页面的路径。 | | target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 | | type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
- NavigationType枚举说明 - NavigationType枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------- | -------------------------- |
| Push | 跳转到应用内的指定页面。 | | Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 | | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 | | Back | 返回上一页面或指定的页面。 |
## 属性 ## 属性
| 名称 | 参数 | 默认值 | 描述 | | 名称 | 参数 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------ | ------- | --------- | ---------------------------------------- |
| active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | | active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
| params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 | | params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
## 示例 ## 示例
``` ```ts
// Navigator Page // Navigator.ets
@Entry @Entry
@Component @Component
struct NavigatorExample { struct NavigatorExample {
...@@ -72,8 +72,8 @@ struct NavigatorExample { ...@@ -72,8 +72,8 @@ struct NavigatorExample {
} }
``` ```
``` ```ts
// Detail Page // Detail.ets
import router from '@system.router' import router from '@system.router'
@Entry @Entry
...@@ -95,8 +95,8 @@ struct DetailExample { ...@@ -95,8 +95,8 @@ struct DetailExample {
``` ```
``` ```ts
// Back Page // Back.ets
@Entry @Entry
@Component @Component
struct BackExample { struct BackExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 8aeebccc
...@@ -62,7 +62,8 @@ Panel(value:{show：boolean}) ...@@ -62,7 +62,8 @@ Panel(value:{show：boolean})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PanelExample { struct PanelExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ 8aeebccc
...@@ -48,7 +48,8 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\) ...@@ -48,7 +48,8 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RefreshExample { struct RefreshExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ Row(value:{space?: Length}) ...@@ -44,7 +44,8 @@ Row(value:{space?: Length})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RowExample { struct RowExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ RowSplit() ...@@ -34,7 +34,8 @@ RowSplit()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RowSplitExample { struct RowSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 8aeebccc
...@@ -135,7 +135,8 @@ scroller.scrollToIndex(value: number): void ...@@ -135,7 +135,8 @@ scroller.scrollToIndex(value: number): void
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ScrollExample { struct ScrollExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
浏览文件 @ 8aeebccc
...@@ -65,7 +65,8 @@ SideBarContainer( type?: SideBarContainerType ) ...@@ -65,7 +65,8 @@ SideBarContainer( type?: SideBarContainerType )
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SideBarContainerExample { struct SideBarContainerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
浏览文件 @ 8aeebccc
...@@ -29,7 +29,8 @@ Stack(value:{alignContent?: Alignment}) ...@@ -29,7 +29,8 @@ Stack(value:{alignContent?: Alignment})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StackExample { struct StackExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 8aeebccc
...@@ -22,49 +22,50 @@ ...@@ -22,49 +22,50 @@
Swiper(value:{controller?: SwiperController}) Swiper(value:{controller?: SwiperController})
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 | | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | | index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | | autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | | interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 | | indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。 | | loop | boolean | true | 是否开启循环。 |
| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | | duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 | | vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | | itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 | | cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 |
| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 | | disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 | | curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
| indicatorStyle<sup>8+</sup>| {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - |设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 | | indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
### SwiperController ### SwiperController
Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
| 接口名称 | 功能描述 | | 接口名称 | 功能描述 |
| -------- | -------- | | ------------------- | ------ |
| showNext():void | 翻至下一页。 | | showNext():void | 翻至下一页。 |
| showPrevious():void | 翻至上一页。 | | showPrevious():void | 翻至上一页。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------ |
| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 | | onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
class MyDataSource implements IDataSource { class MyDataSource implements IDataSource {
private list: number[] = [] private list: number[] = []
private listener: DataChangeListener private listener: DataChangeListener
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 8aeebccc
...@@ -38,7 +38,8 @@ TabContent() ...@@ -38,7 +38,8 @@ TabContent()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TabContentExample { struct TabContentExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 8aeebccc
...@@ -86,7 +86,8 @@ changeIndex(value: number): void ...@@ -86,7 +86,8 @@ changeIndex(value: number): void
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TabsExample { struct TabsExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 8aeebccc
...@@ -43,7 +43,8 @@ Circle(options?: {width: Length, height: Length}) ...@@ -43,7 +43,8 @@ Circle(options?: {width: Length, height: Length})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CircleExample { struct CircleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 8aeebccc
...@@ -43,7 +43,8 @@ ellipse(options?: {width: Length, height: Length}) ...@@ -43,7 +43,8 @@ ellipse(options?: {width: Length, height: Length})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct EllipseExample { struct EllipseExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 8aeebccc
...@@ -45,7 +45,8 @@ Line(options?: {width: Length, height: Length}) ...@@ -45,7 +45,8 @@ Line(options?: {width: Length, height: Length})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineExample { struct LineExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 8aeebccc
...@@ -19,32 +19,33 @@ ...@@ -19,32 +19,33 @@
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | --------------------------------------- | ------ | ---- | ------------------------------------------------------------ | | -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 | | width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 |
| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 | | height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 |
| commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | | commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
commands支持的绘制命令如下： commands支持的绘制命令如下：
| 命令 | 名称 | 参数 | 说明 | | 命令 | 名称 | 参数 | 说明 |
| ---- | -------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ | | ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 | | M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 | | L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 | | H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 | | V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 |
| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 | | C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 |
| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 | | S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 |
| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 | | Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 |
| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 | | T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 |
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 | | A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 |
| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 | | Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
例如： commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。 例如： commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。
## 示例 ## 示例
```ts ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PathExample { struct PathExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ Polygon(value:{options?: {width: Length, height: Length}}) ...@@ -44,7 +44,8 @@ Polygon(value:{options?: {width: Length, height: Length}})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PolygonExample { struct PolygonExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ Polyline(options?: {width: Length, height: Length}) ...@@ -44,7 +44,8 @@ Polyline(options?: {width: Length, height: Length})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PolylineExample { struct PolylineExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 8aeebccc
...@@ -49,7 +49,8 @@ Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;L ...@@ -49,7 +49,8 @@ Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;L
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RectExample { struct RectExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 8aeebccc
...@@ -59,7 +59,8 @@ Shape(value:{target?: PixelMap}) ...@@ -59,7 +59,8 @@ Shape(value:{target?: PixelMap})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShapeExample { struct ShapeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 8aeebccc
...@@ -30,7 +30,8 @@ ...@@ -30,7 +30,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AnimateToExample { struct AnimateToExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 8aeebccc
...@@ -58,7 +58,8 @@ ...@@ -58,7 +58,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GestureSettingsExample { struct GestureSettingsExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
浏览文件 @ 8aeebccc
...@@ -25,9 +25,9 @@ init(curve?: Curve): Object ...@@ -25,9 +25,9 @@ init(curve?: Curve): Object
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ----- | ---- | ------ | ----- |
| curve | Curve | 否 | Linear | 曲线对象。 | | curve | Curve | 否 | Linear | 曲线对象。 |
- 返回值<br> - 返回值<br>
曲线对象Object。 曲线对象Object。
...@@ -42,10 +42,10 @@ steps(count: number, end: boolean): Object ...@@ -42,10 +42,10 @@ steps(count: number, end: boolean): Object
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------- | ---- | ---- | ---------------------------------------- |
| count | number | 是 | - | 阶梯的数量，需要为正整数。 | | count | number | 是 | - | 阶梯的数量，需要为正整数。 |
| end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化&nbsp;，默认值为true，即在终点发生阶跃变化。 | | end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化&nbsp;，默认值为true，即在终点发生阶跃变化。 |
- 返回值<br> - 返回值<br>
曲线对象Object。 曲线对象Object。
...@@ -60,12 +60,12 @@ cubicBezier(x1: number, y1: number, x2: number, y2: number): Object ...@@ -60,12 +60,12 @@ cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
- 参数 - 参数
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | -------------- |
| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | | x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 | | y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | | x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | | y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
- 返回值<br> - 返回值<br>
曲线对象Object。 曲线对象Object。
...@@ -80,12 +80,12 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje ...@@ -80,12 +80,12 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
- 参数 - 参数
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | --------- | ------ | ---- | ----- |
| velocity | number | 是 | 初始速度。 | | velocity | number | 是 | 初始速度。 |
| mass | number | 是 | 质量。 | | mass | number | 是 | 质量。 |
| stiffness | number | 是 | 刚度。 | | stiffness | number | 是 | 刚度。 |
| damping | number | 是 | 阻尼。 | | damping | number | 是 | 阻尼。 |
- 返回值<br> - 返回值<br>
曲线对象Object。 曲线对象Object。
...@@ -93,7 +93,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje ...@@ -93,7 +93,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
## 示例 ## 示例
``` ```ts
import Curves from '@ohos.curves' import Curves from '@ohos.curves'
let curve1 = Curves.init() // 创建一个默认线性插值曲线 let curve1 = Curves.init() // 创建一个默认线性插值曲线
let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
...@@ -103,13 +103,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞 ...@@ -103,13 +103,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
曲线对象只能通过上面的接口创建。 曲线对象只能通过上面的接口创建。
| 接口名称 | 功能描述 | | 接口名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| interpolate(time:&nbsp;number):&nbsp;number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。<br/>time:&nbsp;当前的归一化时间参数，有效值范围0到1。<br/>返回归一化time时间点对应的曲线插值。 | | interpolate(time:&nbsp;number):&nbsp;number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。<br/>time:&nbsp;当前的归一化时间参数，有效值范围0到1。<br/>返回归一化time时间点对应的曲线插值。 |
- 示例 - 示例
``` ```ts
import Curves from '@ohos.curves' import Curves from '@ohos.curves'
let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值
...@@ -118,7 +118,8 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞 ...@@ -118,7 +118,8 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
## 整体示例 ## 整体示例
``` ```ts
// xxx.ets
import Curves from '@ohos.curves' import Curves from '@ohos.curves'
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md
浏览文件 @ 8aeebccc
...@@ -25,37 +25,37 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵， ...@@ -25,37 +25,37 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------------------- | ---- | ---------------------------------------- | -------------------------------------- |
| array | Array&lt;number&gt; | 是 | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。 | | array | Array&lt;number&gt; | 是 | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | -------------- |
| Object | 根据入参创建的四阶矩阵对象。 | | Object | 根据入参创建的四阶矩阵对象。 |
- 参数描述 - 参数描述
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | -------------------- |
| m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 | | m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 |
| m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 | | m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 |
| m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 | | m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 |
| m03 | number | 是 | 无实际意义。 | | m03 | number | 是 | 无实际意义。 |
| m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 | | m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 |
| m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 | | m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 |
| m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 | | m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 |
| m13 | number | 是 | 无实际意义。 | | m13 | number | 是 | 无实际意义。 |
| m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 | | m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 |
| m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 | | m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 |
| m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 | | m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 |
| m23 | number | 是 | 无实际意义。 | | m23 | number | 是 | 无实际意义。 |
| m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 | | m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 |
| m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 | | m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 |
| m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 | | m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 |
| m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 | | m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 |
- 示例 - 示例
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
// 创建一个四阶矩阵 // 创建一个四阶矩阵
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
...@@ -74,12 +74,12 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。 ...@@ -74,12 +74,12 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ------- |
| Object | 单位矩阵对象。 | | Object | 单位矩阵对象。 |
- 示例 - 示例
``` ```ts
// matrix1 和 matrix2 效果一致 // matrix1 和 matrix2 效果一致
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
...@@ -99,12 +99,13 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 ...@@ -99,12 +99,13 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ---------- |
| Object | 当前矩阵的拷贝对象。 | | Object | 当前矩阵的拷贝对象。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -142,17 +143,18 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个 ...@@ -142,17 +143,18 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------- | ---- | ---- | --------- |
| matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 | | matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | --------- |
| Object | 矩阵叠加后的对象。 | | Object | 矩阵叠加后的对象。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -183,12 +185,12 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效 ...@@ -183,12 +185,12 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ----------- |
| Object | 当前矩阵的逆矩阵对象。 | | Object | 当前矩阵的逆矩阵对象。 |
- 示例 - 示例
``` ```ts
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
// matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反 // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
let matrix1 = Matrix4.identity().scale({x:2}) let matrix1 = Matrix4.identity().scale({x:2})
...@@ -205,20 +207,21 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 ...@@ -205,20 +207,21 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ------------- |
| x | number | 否 | 0 | x轴的平移距离，单位px。 | | x | number | 否 | 0 | x轴的平移距离，单位px。 |
| y | number | 否 | 0 | y轴的平移距离，单位px。 | | y | number | 否 | 0 | y轴的平移距离，单位px。 |
| z | number | 否 | 0 | z轴的平移距离，单位px。 | | z | number | 否 | 0 | z轴的平移距离，单位px。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | -------------- |
| Object | 增加好平移效果后的矩阵对象。 | | Object | 增加好平移效果后的矩阵对象。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -246,22 +249,23 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 ...@@ -246,22 +249,23 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---- | ---------- |
| x | number | 否 | 1 | x轴的缩放倍数。 | | x | number | 否 | 1 | x轴的缩放倍数。 |
| y | number | 否 | 1 | y轴的缩放倍数。 | | y | number | 否 | 1 | y轴的缩放倍数。 |
| z | number | 否 | 1 | z轴的缩放倍数。 | | z | number | 否 | 1 | z轴的缩放倍数。 |
| centerX | number | 否 | 0 | 变换中心点x轴坐标。 | | centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
| centerY | number | 否 | 0 | 变换中心点y轴坐标。 | | centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | -------------- |
| Object | 增加好缩放效果后的矩阵对象。 | | Object | 增加好缩放效果后的矩阵对象。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -289,23 +293,24 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 ...@@ -289,23 +293,24 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---- | ---------- |
| x | number | 否 | 1 | 旋转轴向量x坐标。 | | x | number | 否 | 1 | 旋转轴向量x坐标。 |
| y | number | 否 | 1 | 旋转轴向量y坐标。 | | y | number | 否 | 1 | 旋转轴向量y坐标。 |
| z | number | 否 | 1 | 旋转轴向量z坐标。 | | z | number | 否 | 1 | 旋转轴向量z坐标。 |
| angle | number | 否 | 0 | 旋转角度。 | | angle | number | 否 | 0 | 旋转角度。 |
| centerX | number | 否 | 0 | 变换中心点x轴坐标。 | | centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
| centerY | number | 否 | 0 | 变换中心点y轴坐标。 | | centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | -------------- |
| Object | 增加好旋转效果后的矩阵对象。 | | Object | 增加好旋转效果后的矩阵对象。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
...@@ -333,21 +338,22 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个 ...@@ -333,21 +338,22 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ----- | ---- | ---- | --------- |
| point | Point | 是 | - | 需要转换的坐标点。 | | point | Point | 是 | - | 需要转换的坐标点。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----- | ---------------- |
| Point | 返回矩阵变换后的Point对象。 | | Point | 返回矩阵变换后的Point对象。 |
- 示例 - 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
import prompt from '@system.prompt' import prompt from '@system.prompt'
@Entry @Entry
@Component @Component
struct Test { struct Test {
......
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 8aeebccc
...@@ -155,7 +155,8 @@ setCurrentTime(value: number, seekMode: SeekMode) ...@@ -155,7 +155,8 @@ setCurrentTime(value: number, seekMode: SeekMode)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct VideoCreateComponent { struct VideoCreateComponent {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 8aeebccc
...@@ -42,7 +42,8 @@ show(options: {&nbsp;paramObject1}) ...@@ -42,7 +42,8 @@ show(options: {&nbsp;paramObject1})
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ActionSheetExapmle { struct ActionSheetExapmle {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 8aeebccc
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AlertDialogExample { struct AlertDialogExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 8aeebccc
...@@ -13,29 +13,29 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut ...@@ -13,29 +13,29 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- |
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 | | builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层退出时的回调。 | | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层退出时的回调。 |
| autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 | | autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 |
| alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | | alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | | offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 | | customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
| gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 | | gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
- DialogAlignment枚举说明 - DialogAlignment枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------------------------ | ------- |
| Top | 垂直顶部对齐。 | | Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 | | Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 | | Bottom | 垂直底部对齐。 |
| Default | 默认对齐。 | | Default | 默认对齐。 |
| TopStart<sup>8+</sup> | 左上对齐。 | | TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 | | TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 | | CenterStart<sup>8+</sup> | 左中对齐。 |
| CenterEnd<sup>8+</sup> | 右中对齐。 | | CenterEnd<sup>8+</sup> | 右中对齐。 |
| BottomStart<sup>8+</sup> | 左下对齐。 | | BottomStart<sup>8+</sup> | 左下对齐。 |
| BottomEnd<sup>8+</sup> | 右下对齐。 | | BottomEnd<sup>8+</sup> | 右下对齐。 |
## CustomDialogController ## CustomDialogController
...@@ -62,7 +62,8 @@ close(): void ...@@ -62,7 +62,8 @@ close(): void
## 示例 ## 示例
``` ```ts
// xxx.ets
@CustomDialog @CustomDialog
struct CustomDialogExample { struct CustomDialogExample {
controller: CustomDialogController controller: CustomDialogController
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 8aeebccc
...@@ -29,7 +29,8 @@ show(options?: DatePickerDialogOptions) ...@@ -29,7 +29,8 @@ show(options?: DatePickerDialogOptions)
## 示例 ## 示例
### 日期滑动选择器（显示农历）示例 ### 日期滑动选择器（显示农历）示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DatePickerDialogExample01 { struct DatePickerDialogExample01 {
...@@ -62,7 +63,8 @@ struct DatePickerDialogExample01 { ...@@ -62,7 +63,8 @@ struct DatePickerDialogExample01 {
} }
``` ```
### 日期滑动选择器（不显示农历）示例 ### 日期滑动选择器（不显示农历）示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DatePickerDialogExample02 { struct DatePickerDialogExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ 8aeebccc
...@@ -10,8 +10,9 @@ close(): void ...@@ -10,8 +10,9 @@ close(): void
可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。 可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Index { struct Index {
@Builder MenuBuilder(){ @Builder MenuBuilder(){
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 8aeebccc
...@@ -33,7 +33,8 @@ show(options: TextPickerDialogOptions) ...@@ -33,7 +33,8 @@ show(options: TextPickerDialogOptions)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextPickerDialogExample { struct TextPickerDialogExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 8aeebccc
...@@ -27,7 +27,8 @@ show(options?: TimePickerDialogOptions) ...@@ -27,7 +27,8 @@ show(options?: TimePickerDialogOptions)
## 示例 ## 示例
### 时间滑动选择器（24小时制）示例 ### 时间滑动选择器（24小时制）示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerDialogExample01 { struct TimePickerDialogExample01 {
...@@ -55,7 +56,8 @@ struct TimePickerDialogExample01 { ...@@ -55,7 +56,8 @@ struct TimePickerDialogExample01 {
} }
``` ```
### 时间滑动选择器（12小时制）示例 ### 时间滑动选择器（12小时制）示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerDialogExample02 { struct TimePickerDialogExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
浏览文件 @ 8aeebccc
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MotionPathExample { struct MotionPathExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 8aeebccc
...@@ -48,7 +48,8 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ...@@ -48,7 +48,8 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
### fillStyle ### fillStyle
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
...@@ -80,7 +81,8 @@ struct FillStyleExample { ...@@ -80,7 +81,8 @@ struct FillStyleExample {
### lineWidth ### lineWidth
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
...@@ -112,7 +114,8 @@ struct LineWidthExample { ...@@ -112,7 +114,8 @@ struct LineWidthExample {
### strokeStyle ### strokeStyle
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
...@@ -146,7 +149,8 @@ struct StrokeStyleExample { ...@@ -146,7 +149,8 @@ struct StrokeStyleExample {
### lineCap ### lineCap
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
...@@ -182,7 +186,8 @@ struct LineCapExample { ...@@ -182,7 +186,8 @@ struct LineCapExample {
### lineJoin ### lineJoin
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
...@@ -219,7 +224,8 @@ struct LineJoinExample { ...@@ -219,7 +224,8 @@ struct LineJoinExample {
### miterLimit ### miterLimit
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
...@@ -256,7 +262,8 @@ struct MiterLimit { ...@@ -256,7 +262,8 @@ struct MiterLimit {
### font ### font
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Font { struct Font {
...@@ -288,7 +295,8 @@ struct Font { ...@@ -288,7 +295,8 @@ struct Font {
### textAlign ### textAlign
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -335,7 +343,8 @@ struct CanvasExample { ...@@ -335,7 +343,8 @@ struct CanvasExample {
### textBaseline ### textBaseline
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
...@@ -382,7 +391,8 @@ struct TextBaseline { ...@@ -382,7 +391,8 @@ struct TextBaseline {
### globalAlpha ### globalAlpha
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
...@@ -417,7 +427,8 @@ struct GlobalAlpha { ...@@ -417,7 +427,8 @@ struct GlobalAlpha {
### lineDashOffset ### lineDashOffset
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
...@@ -464,7 +475,8 @@ struct LineDashOffset { ...@@ -464,7 +475,8 @@ struct LineDashOffset {
| copy | 显示新绘制内容而忽略现有绘制内容。 | | copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | | xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
...@@ -504,7 +516,8 @@ struct GlobalCompositeOperation { ...@@ -504,7 +516,8 @@ struct GlobalCompositeOperation {
### shadowBlur ### shadowBlur
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
...@@ -538,7 +551,8 @@ struct ShadowBlur { ...@@ -538,7 +551,8 @@ struct ShadowBlur {
### shadowColor ### shadowColor
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
...@@ -573,7 +587,8 @@ struct ShadowColor { ...@@ -573,7 +587,8 @@ struct ShadowColor {
### shadowOffsetX ### shadowOffsetX
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
...@@ -608,7 +623,8 @@ struct ShadowOffsetX { ...@@ -608,7 +623,8 @@ struct ShadowOffsetX {
### shadowOffsetY ### shadowOffsetY
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
...@@ -643,7 +659,8 @@ struct ShadowOffsetY { ...@@ -643,7 +659,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled ### imageSmoothingEnabled
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
...@@ -692,8 +709,9 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -692,8 +709,9 @@ fillRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct FillRect { struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -736,8 +754,9 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -736,8 +754,9 @@ strokeRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -779,8 +798,9 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -779,8 +798,9 @@ clearRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -823,8 +843,9 @@ fillText(text: string, x: number, y: number): void ...@@ -823,8 +843,9 @@ fillText(text: string, x: number, y: number): void
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -866,8 +887,9 @@ strokeText(text: string, x: number, y: number): void ...@@ -866,8 +887,9 @@ strokeText(text: string, x: number, y: number): void
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -917,8 +939,9 @@ measureText(text: string): TextMetrics ...@@ -917,8 +939,9 @@ measureText(text: string): TextMetrics
| width | number | 字符串的宽度。 | | width | number | 字符串的宽度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -959,8 +982,9 @@ stroke(path?: Path2D): void ...@@ -959,8 +982,9 @@ stroke(path?: Path2D): void
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Stroke { struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -997,8 +1021,9 @@ beginPath(): void ...@@ -997,8 +1021,9 @@ beginPath(): void
创建一个新的绘制路径。 创建一个新的绘制路径。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct BeginPath { struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1043,8 +1068,9 @@ moveTo(x: number, y: number): void ...@@ -1043,8 +1068,9 @@ moveTo(x: number, y: number): void
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1087,8 +1113,9 @@ lineTo(x: number, y: number): void ...@@ -1087,8 +1113,9 @@ lineTo(x: number, y: number): void
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1125,8 +1152,9 @@ closePath(): void ...@@ -1125,8 +1152,9 @@ closePath(): void
结束当前路径形成一个封闭路径。 结束当前路径形成一个封闭路径。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1171,8 +1199,9 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern ...@@ -1171,8 +1199,9 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1219,8 +1248,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1219,8 +1248,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1265,8 +1295,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1265,8 +1295,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1313,8 +1344,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1313,8 +1344,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1359,8 +1391,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1359,8 +1391,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1409,8 +1442,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1409,8 +1442,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1454,8 +1488,9 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1454,8 +1488,9 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1490,8 +1525,9 @@ fill(): void ...@@ -1490,8 +1525,9 @@ fill(): void
对封闭路径进行填充。 对封闭路径进行填充。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Fill { struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1526,8 +1562,9 @@ clip(): void ...@@ -1526,8 +1562,9 @@ clip(): void
设置当前路径为剪切路径。 设置当前路径为剪切路径。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1570,8 +1607,9 @@ rotate(rotate: number): void ...@@ -1570,8 +1607,9 @@ rotate(rotate: number): void
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Rotate { struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1612,8 +1650,9 @@ scale(x: number, y: number): void ...@@ -1612,8 +1650,9 @@ scale(x: number, y: number): void
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Scale { struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1666,8 +1705,9 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1666,8 +1705,9 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
| translateY | number | 是 | 0 | 指定垂直移动值。 | | translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1718,8 +1758,9 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() ...@@ -1718,8 +1758,9 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
| translateY | number | 是 | 0 | 指定垂直移动值。 | | translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct SetTransform { struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1763,8 +1804,9 @@ translate(x: number, y: number): void ...@@ -1763,8 +1804,9 @@ translate(x: number, y: number): void
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1818,8 +1860,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ...@@ -1818,8 +1860,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct Index { struct Index {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1917,8 +1960,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1917,8 +1960,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct PutImageData { struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1959,8 +2003,9 @@ restore(): void ...@@ -1959,8 +2003,9 @@ restore(): void
对保存的绘图上下文进行恢复。 对保存的绘图上下文进行恢复。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -1992,8 +2037,9 @@ save(): void ...@@ -1992,8 +2037,9 @@ save(): void
对当前的绘图上下文进行保存。 对当前的绘图上下文进行保存。
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -2033,8 +2079,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2033,8 +2079,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
| y1 | number | 是 | 0 | 终点的y轴坐标。 | | y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
...@@ -2084,8 +2131,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2084,8 +2131,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例 - 示例
``` ```ts
@Entry // xxx.ets
@Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
......
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ 8aeebccc
...@@ -7,63 +7,63 @@ ...@@ -7,63 +7,63 @@
页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。 页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
| 名称 | 参数 | 参数描述 | | 名称 | 参数 | 参数描述 |
| -------- | -------- | -------- | | ------------------- | ------ | ------------------------------- |
| PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 | | PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 |
| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 | | PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 |
- 动效参数说明 - 动效参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
| type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 | | type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 |
| duration | number | 1000 | 否 | 动画时长，单位为毫秒。 | | duration | number | 1000 | 否 | 动画时长，单位为毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。 | | curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。 |
| delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 | | delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 |
- RouteType枚举说明 - RouteType枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---- | ---------------------------------------- |
| Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | | Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 |
| Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | | Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 |
## 属性 ## 属性
PageTransitionEnter和PageTransitionExit组件支持的属性： PageTransitionEnter和PageTransitionExit组件支持的属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 | | slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 | | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 |
| 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/>} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 | | 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/>} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 |
| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 | | opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
- SlideEffect枚举说明 - SlideEffect枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------ | ------------------------- |
| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | | Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | | Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | | Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 |
| Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | | Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 |
## 事件 ## 事件
PageTransitionEnter和PageTransitionExit组件支持的事件： PageTransitionEnter和PageTransitionExit组件支持的事件：
| 事件 | 功能描述 | | 事件 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------------------------------- |
| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 | | onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 | | onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
## 示例 ## 示例
自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。 自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。
``` ```ts
// index.ets // index.ets
@Entry @Entry
@Component @Component
...@@ -97,7 +97,7 @@ struct PageTransitionExample1 { ...@@ -97,7 +97,7 @@ struct PageTransitionExample1 {
} }
``` ```
``` ```ts
// page1.ets // page1.ets
@Entry @Entry
@Component @Component
...@@ -132,7 +132,7 @@ struct AExample { ...@@ -132,7 +132,7 @@ struct AExample {
自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。 自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。
``` ```ts
// index.ets // index.ets
@Entry @Entry
@Component @Component
...@@ -163,7 +163,7 @@ struct PageTransitionExample { ...@@ -163,7 +163,7 @@ struct PageTransitionExample {
} }
``` ```
``` ```ts
// page1.ets // page1.ets
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。 示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TransitionExample { struct TransitionExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
浏览文件 @ 8aeebccc
...@@ -9,23 +9,24 @@ ...@@ -9,23 +9,24 @@
## 属性 ## 属性
| 名称 | 参数 | 默认值 | 参数描述 | | 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | | ---------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 | | sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 |
- options参数说明 - options参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------------------- | ------ | ---- | --------------------- |
| duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 | | duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 | | curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 |
| delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 | | delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 |
## 示例 ## 示例
示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。 示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SharedTransitionExample { struct SharedTransitionExample {
...@@ -53,8 +54,8 @@ struct SharedTransitionExample { ...@@ -53,8 +54,8 @@ struct SharedTransitionExample {
} }
``` ```
``` ```ts
// PageB // PageB.ets
@Entry @Entry
@Component @Component
struct BExample { struct BExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 8aeebccc
...@@ -33,7 +33,8 @@ ...@@ -33,7 +33,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BackgroundExample { struct BackgroundExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BorderExample { struct BorderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 8aeebccc
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TouchAbleExample { struct TouchAbleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 8aeebccc
...@@ -57,7 +57,8 @@ sendEventByKey(id: string, action: number, params: string): boolean ...@@ -57,7 +57,8 @@ sendEventByKey(id: string, action: number, params: string): boolean
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct IdExample { struct IdExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
浏览文件 @ 8aeebccc
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct EnabledExample { struct EnabledExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 8aeebccc
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FlexExample { struct FlexExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
浏览文件 @ 8aeebccc
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FocusableExample { struct FocusableExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 8aeebccc
...@@ -37,7 +37,8 @@ ...@@ -37,7 +37,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ColorGradientExample { struct ColorGradientExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
浏览文件 @ 8aeebccc
...@@ -23,7 +23,8 @@ ...@@ -23,7 +23,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GridContainerExample1 { struct GridContainerExample1 {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
浏览文件 @ 8aeebccc
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct HoverExample { struct HoverExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 8aeebccc
...@@ -29,7 +29,8 @@ ...@@ -29,7 +29,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageEffectsExample { struct ImageEffectsExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ 8aeebccc
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AspectRatioExample { struct AspectRatioExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
浏览文件 @ 8aeebccc
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PositionExample { struct PositionExample {
...@@ -64,7 +65,8 @@ struct PositionExample { ...@@ -64,7 +65,8 @@ struct PositionExample {
![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif) ![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif)
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PositionExample2 { struct PositionExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 8aeebccc
...@@ -12,29 +12,30 @@ ...@@ -12,29 +12,30 @@
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | | bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | | bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
- MenuItem - MenuItem
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 | | value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 | | action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
- ResponseType<sup>8+</sup> - ResponseType<sup>8+</sup>
| 参数值 | 描述 | | 参数值 | 描述 |
| -------- | -------- | | ---------- | ------------- |
| LongPress | 通过长按触发菜单弹出。 | | LongPress | 通过长按触发菜单弹出。 |
| RightClick | 通过鼠标右键触发菜单弹出。 | | RightClick | 通过鼠标右键触发菜单弹出。 |
## 示例 ## 示例
#### 普通菜单 #### 普通菜单
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MenuExample { struct MenuExample {
...@@ -66,7 +67,8 @@ struct MenuExample { ...@@ -66,7 +67,8 @@ struct MenuExample {
#### 自定义内容菜单 #### 自定义内容菜单
``` ```ts
// xxx.ets
import router from '@system.router'; import router from '@system.router';
@Entry @Entry
...@@ -116,7 +118,8 @@ struct MenuExample { ...@@ -116,7 +118,8 @@ struct MenuExample {
#### 菜单(右键触发显示) #### 菜单(右键触发显示)
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ContextMenuExample { struct ContextMenuExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 8aeebccc
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct OpacityExample { struct OpacityExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ 8aeebccc
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct OverlayExample { struct OverlayExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 8aeebccc
...@@ -28,7 +28,8 @@ ...@@ -28,7 +28,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StyleExample { struct StyleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 8aeebccc
...@@ -52,7 +52,8 @@ ...@@ -52,7 +52,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PopupExample { struct PopupExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
浏览文件 @ 8aeebccc
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClipAndMaskExample { struct ClipAndMaskExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ 8aeebccc
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SizeExample { struct SizeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ 8aeebccc
...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextStyleExample { struct TextStyleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ 8aeebccc
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ResponseRegionExample { struct ResponseRegionExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @ 8aeebccc
...@@ -12,17 +12,18 @@ ...@@ -12,17 +12,18 @@
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| 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:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 | | 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:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 |
| translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。 | | translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。 |
| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 | | scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 |
| transform | matrix:&nbsp;Matrix4 | - | 设置当前组件的变换矩阵。 | | transform | matrix:&nbsp;Matrix4 | - | 设置当前组件的变换矩阵。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4' import Matrix4 from '@ohos.matrix4'
@Entry @Entry
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ 8aeebccc
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct VisibilityExample { struct VisibilityExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
浏览文件 @ 8aeebccc
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ZIndexExample { struct ZIndexExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ 8aeebccc
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AreaExample { struct AreaExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 8aeebccc
...@@ -47,7 +47,8 @@ ...@@ -47,7 +47,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClickExample { struct ClickExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 8aeebccc
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ 8aeebccc
...@@ -62,7 +62,8 @@ ...@@ -62,7 +62,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct KeyEventExample { struct KeyEventExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
浏览文件 @ 8aeebccc
...@@ -11,15 +11,16 @@ ...@@ -11,15 +11,16 @@
## 事件 ## 事件
| 名称 | 支持冒泡 | 功能描述 | | 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- | | ---------------------------------------- | ---- | ------------- |
| onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 | | onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 |
| onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 | | onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
import prompt from '@system.prompt' import prompt from '@system.prompt'
@Entry @Entry
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ 8aeebccc
...@@ -11,52 +11,53 @@ ...@@ -11,52 +11,53 @@
## 事件 ## 事件
| 名称 | 是否冒泡 | 功能描述 | | 名称 | 是否冒泡 | 功能描述 |
| -------- | -------- | -------- | | ---------------------------------------- | ---- | ---------------------------------------- |
| onTouch(callback:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 | onTouch(callback:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
### TouchEvent对象说明 ### TouchEvent对象说明
- 属性 - 属性
| 属性名称 | 类型 | 描述 | | 属性名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------------------- | ---------------------------------------- | ------------ |
| type | TouchType | 触摸事件的类型。 | | type | TouchType | 触摸事件的类型。 |
| touches | ArrayTouchObject&gt; | 全部手指信息。 | | touches | ArrayTouchObject&gt; | 全部手指信息。 |
| changedTouches | ArrayTouchObject&gt; | 当前发生变化的手指信息。 | | changedTouches | ArrayTouchObject&gt; | 当前发生变化的手指信息。 |
| timestamp | number | 事件时间戳。 | | timestamp | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md)| 被触摸元素对象。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 被触摸元素对象。 |
- 接口 - 接口
| 接口名称 | 功能描述 | | 接口名称 | 功能描述 |
| -------- | -------- | | ---------------------- | ------- |
| stopPropagation()：void | 阻塞事件冒泡。 | | stopPropagation()：void | 阻塞事件冒泡。 |
- TouchObject对象说明 - TouchObject对象说明
| 属性名称 | 类型 | 描述 | | 属性名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | --------- | ------------------- |
| type | TouchType | 触摸事件的类型。 | | type | 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坐标。 |
- TouchType枚举说明 - TouchType枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------ | --------------- |
| Down | 手指按下时触发。 | | Down | 手指按下时触发。 |
| Up | 手指抬起时触发。 | | Up | 手指抬起时触发。 |
| Move | 手指按压态在屏幕上移动时触发。 | | Move | 手指按压态在屏幕上移动时触发。 |
| Cancel | 触摸事件取消时触发。 | | Cancel | 触摸事件取消时触发。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TouchExample { struct TouchExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @ 8aeebccc
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FocusEventExample { struct FocusEventExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ 8aeebccc
...@@ -49,7 +49,8 @@ ...@@ -49,7 +49,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MouseEventExample { struct MouseEventExample {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或