Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 099e7f39 编写于 作者: T tianyu
浏览文件
操作

update geshi 

Signed-off-by: Ntianyu <tianyu55@h-partners.com>
上级 ca1a69bd
隐藏空白更改
内联 并排
Showing with 414 addition and 380 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ 099e7f39
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
## 子组件 ## 子组件
支持子组件&lt;span&gt;。 无
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md
浏览文件 @ 099e7f39
...@@ -81,34 +81,51 @@ ...@@ -81,34 +81,51 @@
```js ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
toggle_list: [ toggle_list: [
{ "id":"1001", "name":"Living room", "checked":true }, {
{ "id":"1002", "name":"Bedroom", "checked":false }, "id": "1001", "name": "Living room", "checked": true
{ "id":"1003", "name":"Second bedroom", "checked":false }, },
{ "id":"1004", "name":"Kitchen", "checked":false }, {
{ "id":"1005", "name":"Study", "checked":false }, "id": "1002", "name": "Bedroom", "checked": false
{ "id":"1006", "name":"Garden", "checked":false }, },
{ "id":"1007", "name":"Bathroom", "checked":false }, {
{ "id":"1008", "name":"Balcony", "checked":false }, "id": "1003", "name": "Second bedroom", "checked": false
], },
toggles: ["Living room","Bedroom","Kitchen","Study"], {
idx: "" "id": "1004", "name": "Kitchen", "checked": false
}, },
allclick(arg) { {
this.idx = arg "id": "1005", "name": "Study", "checked": false
}, },
allchange(e) { {
if (e.checked === true) { "id": "1006", "name": "Garden", "checked": false
for (var i = 0; i < this.toggle_list.length; i++) { },
if (this.toggle_list[i].id === this.idx) { {
this.toggle_list[i].checked = true "id": "1007", "name": "Bathroom", "checked": false
} else { },
this.toggle_list[i].checked = false {
"id": "1008", "name": "Balcony", "checked": false
},
],
toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
idx: ""
},
allclick(arg) {
this.idx = arg;
},
allchange(e) {
if (e.checked != true) {
return;
}
for (var i = 0; i < this.toggle_list.length; i++) {
if (this.toggle_list[i].id === this.idx) {
this.toggle_list[i].checked = true;
} else {
this.toggle_list[i].checked = false;
}
} }
}
} }
}
} }
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
浏览文件 @ 099e7f39
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
> **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 工具栏[toolbar](js-components-basic-toolbar.md)子组件。 用于展示工具栏上的一个操作选项。
## 子组件 ## 子组件
...@@ -59,13 +59,13 @@ ...@@ -59,13 +59,13 @@
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<toolbar style="position: fixed; bottom: 0px; "> <toolbar style="position : fixed; bottom : 0px;">
<toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item> <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 2'> </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
<toolbar-item icon='common/Icon/diamond.png' value='Option 3' > </toolbar-item> <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 4' > </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 5' > </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 6'> </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
</toolbar> </toolbar>
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @ 099e7f39
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
## 子组件 ## 子组件
支持除&lt;list&gt;之外的子组件。 可以包含子组件。
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 099e7f39
...@@ -20,7 +20,7 @@ Row(value?:{space?: number&nbsp;|&nbsp;string }) ...@@ -20,7 +20,7 @@ Row(value?:{space?: number&nbsp;|&nbsp;string })
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| space | string&nbsp;\|&nbsp;number | 否 | 横向布局元素间距。<br/>默认值：0 | | space | string&nbsp;\|&nbsp;number | 否 | 横向布局元素间距。<br/>默认值：0，单位vp |
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 099e7f39
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
## 响应手势事件 ## 响应手势事件
组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。例如通过TapGesture对象的onAction事件响应点击事件。其余手势的事件定义见各个手势对象章节。 组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。例如通过TapGesture对象的onAction事件响应点击事件。其余手势的事件定义见各个手势对象章节。 若需绑定多种手势请使用 [组合手势](ts-combined-gestures.md)。
- TapGesture事件说明 - TapGesture事件说明
| 名称 | 功能描述 | | 名称 | 功能描述 |
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 099e7f39
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制绘制到canvas上，加快了绘制速度。 使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。
## 接口 ## 接口
...@@ -13,11 +13,11 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ...@@ -13,11 +13,11 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ | | ------- | ------------------------------------------------------------ | ---- | ------------------------------------ |
| width | number | 是 | - | 离屏画布的宽度 | | width | number | 是 | 离屏画布的宽度 |
| height | number | 是 | - | 离屏画布的高度 | | height | number | 是 | 离屏画布的高度 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | 见RenderingContextSettings接口描述。 |
## 属性 ## 属性
...@@ -703,12 +703,12 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -703,12 +703,12 @@ 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 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -750,12 +750,12 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -750,12 +750,12 @@ 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 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -796,12 +796,12 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -796,12 +796,12 @@ 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 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -844,12 +844,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void ...@@ -844,12 +844,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | "" | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
**示例：** **示例：**
...@@ -891,12 +891,12 @@ strokeText(text: string, x: number, y: number): void ...@@ -891,12 +891,12 @@ 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坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。|
**示例：** **示例：**
...@@ -938,33 +938,33 @@ measureText(text: string): TextMetrics ...@@ -938,33 +938,33 @@ measureText(text: string): TextMetrics
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 | | text | string | 是 | "" | 需要进行测量的文本。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----------- | ------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
**TextMetrics类型描述:** **TextMetrics类型描述:**
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ----- | ------ | ------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | width | number | 字符串的宽度。 |
| height | number | 字符串的高度。 | | height | number | 字符串的高度。 |
| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 |
| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 |
| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 |
| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。|
| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。|
| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。|
| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。|
| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。|
| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。|
| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。|
| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。|
**示例：** **示例：**
...@@ -1007,9 +1007,9 @@ stroke(path?: Path2D): void ...@@ -1007,9 +1007,9 @@ stroke(path?: Path2D): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ | | ---- | ---------------------------------------- | ---- | ------------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | 需要绘制的Path2D。 |
**示例：** **示例：**
...@@ -1095,10 +1095,10 @@ moveTo(x: number, y: number): void ...@@ -1095,10 +1095,10 @@ moveTo(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
**示例：** **示例：**
...@@ -1142,10 +1142,10 @@ lineTo(x: number, y: number): void ...@@ -1142,10 +1142,10 @@ lineTo(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
**示例：** **示例：**
...@@ -1231,16 +1231,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu ...@@ -1231,16 +1231,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ---------- | -------------------------------------------------- | ---- | ------ | ------------------------------------------------------------ |
| 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'。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ---------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：** **示例：**
...@@ -1284,14 +1284,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1284,14 +1284,14 @@ 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坐标值。 |
**示例：** **示例：**
...@@ -1335,12 +1335,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1335,12 +1335,12 @@ 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坐标值。 |
**示例：** **示例：**
...@@ -1384,14 +1384,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1384,14 +1384,14 @@ 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 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例：** **示例：**
...@@ -1434,13 +1434,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1434,13 +1434,13 @@ 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 | 圆弧的圆半径值。 |
**示例：** **示例：**
...@@ -1483,16 +1483,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1483,16 +1483,16 @@ 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 | 椭圆绘制的结束点角度，以弧度表示。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | | counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
**示例：** **示例：**
...@@ -1535,12 +1535,12 @@ rect(x: number, y: number, w: number, h: number): void ...@@ -1535,12 +1535,12 @@ rect(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坐标值。 |
| w | number | 是 | 0 | 指定矩形的宽度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 | | h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -1661,9 +1661,9 @@ rotate(angle: number): void ...@@ -1661,9 +1661,9 @@ rotate(angle: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**示例：** **示例：**
...@@ -1705,10 +1705,10 @@ scale(x: number, y: number): void ...@@ -1705,10 +1705,10 @@ scale(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
**示例：** **示例：**
...@@ -1758,14 +1758,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1758,14 +1758,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 | | f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：** **示例：**
...@@ -1813,14 +1813,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() ...@@ -1813,14 +1813,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 | | f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：** **示例：**
...@@ -1865,10 +1865,10 @@ translate(x: number, y: number): void ...@@ -1865,10 +1865,10 @@ translate(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
**示例：** **示例：**
...@@ -1915,17 +1915,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: ...@@ -1915,17 +1915,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | -------------------- | | ------- | ---------------------------------------- | ---- | ---- | -------------------- |
| 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坐标值。 |
| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 | | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dw | number | 否 | 0 | 绘制区域的宽度。 | | dw | number | 否 | 0 | 绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。 | | dh | number | 否 | 0 | 绘制区域的高度。 |
**示例：** **示例：**
...@@ -1968,10 +1968,10 @@ createImageData(sw: number, sh: number): ImageData ...@@ -1968,10 +1968,10 @@ createImageData(sw: number, sh: number): ImageData
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| sw | number | 是 | 0 | ImageData的宽度。 | | sw | number | 是 | 0 | ImageData的宽度。 |
| sh | number | 是 | 0 | ImageData的高度。 | | sh | number | 是 | 0 | ImageData的高度。 |
### createImageData ### createImageData
...@@ -1982,15 +1982,15 @@ createImageData(imageData: ImageData): ImageData ...@@ -1982,15 +1982,15 @@ createImageData(imageData: ImageData): ImageData
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- | | --------- | ------------------------------------------------ | ---- | ----------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | 被复制的ImageData对象。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ------------------------------------------------ | ------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### getPixelMap ### getPixelMap
...@@ -2000,18 +2000,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -2000,18 +2000,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| 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 | 需要输出的区域的高度。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ---------- | ---------------------------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
### getImageData ### getImageData
...@@ -2022,18 +2022,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2022,18 +2022,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| 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 | 需要输出的区域的高度。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
### putImageData ### putImageData
...@@ -2046,15 +2046,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: ...@@ -2046,15 +2046,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| 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的高度 | 源图像数据矩形裁切范围的高度。 |
**示例：** **示例：**
...@@ -2391,12 +2391,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2391,12 +2391,12 @@ 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轴坐标。 |
**示例：** **示例：**
...@@ -2443,14 +2443,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2443,14 +2443,14 @@ 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 | 终点圆的半径。必须为非负且有限的。 |
**示例：** **示例：**
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
浏览文件 @ 099e7f39
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
| 名称 | 参数 | 参数描述 | | 名称 | 参数 | 参数描述 |
| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| sharedTransition | id:&nbsp;string,<br/>{<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number,<br/>motionPath?: <br/>{<br/>path: string,<br/>form?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。<br/>-&nbsp; id：设置组件的id。<br/>-&nbsp; duration：单位为毫秒，默认动画时长为1000毫秒。<br/>-&nbsp;curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。<br/>-&nbsp;delay：单位为毫秒，默认不延时播放。<br/>-&nbsp;motionPath：运动路径信息。<br/>-&nbsp;path：设置路径。<br/>-&nbsp;from：设置起始值。<br/>-&nbsp;to：设置终止值。<br/>-&nbsp;rotatable：是否旋转。<br/>-&nbsp;zIndex：设置Z轴。<br/>-&nbsp;type：动画类型。 | | sharedTransition | id:&nbsp;string,<br/>{<br/>&nbsp;duration?: number,<br/>&nbsp;curve?: Curve&nbsp;\|&nbsp;string,<br/>&nbsp;delay?: number,<br/>&nbsp;motionPath?: <br/>{<br/>&nbsp;path: string,<br/>&nbsp;form?: number,<br/>&nbsp;to?: number,<br/>&nbsp;rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。<br/>-&nbsp;id：设置组件的id。<br/>-&nbsp;duration：单位为毫秒，默认动画时长为1000毫秒。<br/>-&nbsp;curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。<br/>-&nbsp;delay：单位为毫秒，默认不延时播放。<br/>-&nbsp;motionPath：运动路径信息。<br/>-&nbsp;path：设置路径。<br/>-&nbsp;from：设置起始值。<br/>-&nbsp;to：设置终止值。<br/>-&nbsp;rotatable：是否旋转。<br/>-&nbsp;zIndex：设置Z轴。<br/>-&nbsp;type：动画类型。 |
## 示例 ## 示例
......
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @ 099e7f39
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
## 主要特征 ## 主要特征
- UI组件：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 - UI组件：方舟开发框架不仅提供了多种基础组件， 例如文本、图片、按钮等 ，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。
- 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 - 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
......
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ 099e7f39
...@@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' }
], ]
}, },
handleClick() { handleClick() {
const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
...@@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' }
], ]
}, },
handleClick() { handleClick() {
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
......
zh-cn/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @ 099e7f39
...@@ -47,3 +47,5 @@ struct CustomDialogUser { ...@@ -47,3 +47,5 @@ struct CustomDialogUser {
} }
} }
``` ```
![custom-dialog-demo](figures/custom-dialog-demo.gif)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 099e7f39
...@@ -17,58 +17,62 @@ ...@@ -17,58 +17,62 @@
```css ```css
/* xxx.css */ /* xxx.css */
.container{ .container {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
} }
canvas{
width: 600px; canvas {
height: 600px; width: 600px;
background-color: #fdfdfd; height: 600px;
border: 5px solid red; background-color: #fdfdfd;
border: 5px solid red;
} }
``` ```
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
onShow(){ onShow() {
let ctx = this.$refs.canvas.getContext('2d',{antialias: true}); let ctx = this.$refs.canvas.getContext('2d', {
let path = ctx.createPath2D(); antialias: true
// 房顶 });
path.moveTo(10, 300); let path = ctx.createPath2D();
path.lineTo(210,100); // 房顶
path.lineTo(410, 300); path.moveTo(10, 300);
// 屋子 path.lineTo(210, 100);
path.moveTo(10, 300); path.lineTo(410, 300);
path.lineTo(410, 300); // 屋子
path.lineTo(410, 600); path.moveTo(10, 300);
path.lineTo(10, 600); path.lineTo(410, 300);
path.closePath(); path.lineTo(410, 600);
// 窗子 path.lineTo(10, 600);
path.moveTo(50, 450); path.closePath();
path.bezierCurveTo(70, 350, 130, 350, 150, 450); // 窗子
path.closePath(); path.moveTo(50, 450);
// 门 path.bezierCurveTo(70, 350, 130, 350, 150, 450);
path.moveTo(250, 450); path.closePath();
path.rect(250, 450, 350, 600); // 门
path.closePath(); path.moveTo(250, 450);
// 烟囱 path.rect(250, 450, 350, 600);
path.moveTo(365, 250); path.closePath();
path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1); // 烟囱
// 树 path.moveTo(365, 250);
path.moveTo(485, 450); path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1);
path.quadraticCurveTo(510, 500, 485, 600); // 树
path.moveTo(550, 450); path.moveTo(485, 450);
path.quadraticCurveTo(525, 500, 550, 600); path.quadraticCurveTo(510, 500, 485, 600);
path.moveTo(600, 535); path.moveTo(550, 450);
path.arc(520, 450, 85, 0, 6); path.quadraticCurveTo(525, 500, 550, 600);
ctx.stroke(path); path.moveTo(600, 535);
}, path.arc(520, 450, 85, 0, 6);
ctx.stroke(path);
}
} }
``` ```
...@@ -84,46 +88,49 @@ export default { ...@@ -84,46 +88,49 @@ export default {
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
<div class="content"> <div class="content">
<text onclick="addPath">{{ isAdd }}</text> <text onclick="addPath">{{ isAdd }}</text>
<text onclick="setTransform">{{textName}}</text> <text onclick="setTransform">{{ textName }}</text>
</div> </div>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container{ .container {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
} }
canvas{
width: 600px; canvas {
height: 600px; width: 600px;
background-color: #fdfdfd; height: 600px;
border: 5px solid red; background-color: #fdfdfd;
border: 5px solid red;
} }
.content{
width: 80%; .content {
margin-top: 50px; width: 80%;
margin-bottom: 50px; margin-top: 50px;
display: flex; margin-bottom: 50px;
flex-wrap: wrap; display: flex;
justify-content: space-around; flex-wrap: wrap;
justify-content: space-around;
} }
text{
width: 150px; text {
height: 80px; width: 150px;
color: white; height: 80px;
border-radius: 20px; color: white;
text-align: center; border-radius: 20px;
background-color: #6060e7; text-align: center;
margin-bottom: 30px; background-color: #6060e7;
margin-bottom: 30px;
} }
``` ```
...@@ -131,58 +138,66 @@ text{ ...@@ -131,58 +138,66 @@ text{
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data: {
ctx: null, ctx: null,
path1: null, path1: null,
path2: null, path2: null,
path3: null, path3: null,
isAdd: "addPath2", isAdd: "addPath2",
isChange: true, isChange: true,
textName: 'change' textName: 'change'
}, },
onShow(){ onShow() {
this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); this.ctx = this.$refs.canvas.getContext('2d', {
this.path1 = this.ctx.createPath2D(); antialias: true
this.path1.moveTo(200, 200); });
this.path1.lineTo(400, 200); this.path1 = this.ctx.createPath2D();
this.path1.lineTo(400, 400); // 正方形
this.path1.lineTo(200, 400); this.path1.moveTo(200, 200);
this.path1.closePath(); this.path1.lineTo(400, 200);
this.path2 = this.ctx.createPath2D(); this.path1.lineTo(400, 400);
this.path2.arc(300, 300, 75, 0, 6.28) this.path1.lineTo(200, 400);
this.ctx.stroke(this.path1); this.path1.closePath();
}, this.path2 = this.ctx.createPath2D();
addPath(){ // 圆形
if(this.isAdd == "addPath2"){ this.path2.arc(300, 300, 75, 0, 6.28);
this.ctx.clearRect(0,0,600,600) this.ctx.stroke(this.path1);
this.ctx.beginPath(); },
this.path2.addPath(this.path1) addPath() {
this.ctx.stroke(this.path2); if (this.isAdd == "addPath2") {
this.isAdd = "clearPath2" // 删除指定指定区域的绘制内容
}else{ this.ctx.clearRect(0, 0, 600, 600);
this.ctx.clearRect(0,0,600,600) this.ctx.beginPath();
this.ctx.stroke(this.path1); // 将另一个的路径添加到当前路径对象中
this.isAdd = "addPath2" this.path2.addPath(this.path1);
} this.ctx.stroke(this.path2);
}, this.isAdd = "clearPath2";
setTransform(){ } else {
if(this.isChange){ this.ctx.clearRect(0, 0, 600, 600);
this.ctx.clearRect(0,0,600,600) this.ctx.stroke(this.path1);
this.path3 = this.ctx.createPath2D(); this.isAdd = "addPath2";
this.path3.arc(150, 150, 100, 0, 6.28) }
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); },
this.ctx.stroke(this.path3); setTransform() {
this.isChange = !this.isChange; if (this.isChange) {
this.textName = "back" this.ctx.clearRect(0, 0, 600, 600);
}else{ this.path3 = this.ctx.createPath2D();
this.ctx.clearRect(0,0,600,600) this.path3.arc(150, 150, 100, 0, 6.28);
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); // 重置现有的变换矩阵并创建新的变换矩阵
this.ctx.stroke(this.path3); this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0);
this.isChange = !this.isChange; this.ctx.stroke(this.path3);
this.textName = "change" this.isChange = !this.isChange;
this.textName = "back"
} else {
this.ctx.clearRect(0, 0, 600, 600);
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "change";
}
} }
},
} }
``` ```
......
zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md
浏览文件 @ 099e7f39
...@@ -320,7 +320,7 @@ ...@@ -320,7 +320,7 @@
} }
``` ```
自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件的去初始化的时机执行。 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件销毁之前的时机执行。
![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png)
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 099e7f39
...@@ -130,7 +130,7 @@ listener.on('change', onPortrait) ...@@ -130,7 +130,7 @@ listener.on('change', onPortrait)
} }
aboutToAppear() { aboutToAppear() {
portraitFunc = this.onPortrait.bind(this) //bind current js instance portraitFunc = this.onPortrait.bind(this) //绑定当前应用实例
this.listener.on('change', portraitFunc) this.listener.on('change', portraitFunc)
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或