diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md index 1c8e3af694f3bbe4bbad43fb87d29072efd44cc2..c5651d7d84156d7639b989d4e58687dbc109ede0 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md @@ -12,7 +12,7 @@ ## 子组件 -支持子组件<span>。 +无 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md index a4693c14a7e68d09d545dc88d3bdebcedf20cc15..59b58bcf45b5c794595a5d8a6a934d79512a3a0c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md @@ -56,7 +56,7 @@ ## 示例 -``` +```html
1. Multiple choice example @@ -71,44 +71,61 @@
``` -``` +```css /* xxx.css */ .margin { margin: 7px; } ``` -``` +```js // xxx.js export default { - data: { - toggle_list: [ - { "id":"1001", "name":"Living room", "checked":true }, - { "id":"1002", "name":"Bedroom", "checked":false }, - { "id":"1003", "name":"Second bedroom", "checked":false }, - { "id":"1004", "name":"Kitchen", "checked":false }, - { "id":"1005", "name":"Study", "checked":false }, - { "id":"1006", "name":"Garden", "checked":false }, - { "id":"1007", "name":"Bathroom", "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) { - 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 + data: { + toggle_list: [ + { + "id": "1001", "name": "Living room", "checked": true + }, + { + "id": "1002", "name": "Bedroom", "checked": false + }, + { + "id": "1003", "name": "Second bedroom", "checked": false + }, + { + "id": "1004", "name": "Kitchen", "checked": false + }, + { + "id": "1005", "name": "Study", "checked": false + }, + { + "id": "1006", "name": "Garden", "checked": false + }, + { + "id": "1007", "name": "Bathroom", "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; + } } - } } - } } ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md index 21e0b16883e8065fa81dc2473a4382d8f9a956d4..d6b269a09543c379be402082f96bf2591362d683 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md @@ -3,7 +3,7 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 + 工具栏[toolbar](js-components-basic-toolbar.md)子组件。 用于展示工具栏上的一个操作选项。 ## 子组件 @@ -57,15 +57,15 @@ ## 示例 -``` +```html - - - - - - - + + + + + + + ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md index b017870ad7902efcdddb87bb6ca136bc1faefcf8..42c0f3f3c289d37cd75ba35635e398f003fd90b7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md @@ -12,7 +12,7 @@ ## 子组件 -支持除<list>之外的子组件。 +可以包含子组件。 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index de86851e93ce7a5151f28aeebd706788c6af0442..aea905f8f281a2574ef72f1cecdd27f16c60fdb0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -23,9 +23,9 @@ Row(value?:{space?: string | number}) **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------------------------- | ---- | ------ | ------------------ | -| space | string \| number | 否 | 0 | 横向布局元素间距。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | -------------------------- | ---- | ---------------------------------------- | +| space | string \| number | 否 | 横向布局元素间距。
默认值：0，单位vp | ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 29f42de35dc9438639a8b5fe09b9959b92871aed..708ffa6e29d21b398af43a3076f273f066ea8f74 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -4,7 +4,7 @@ > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制绘制到canvas上，加快了绘制速度。 +使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。 ## 接口 @@ -13,11 +13,11 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ | -| width | number | 是 | - | 离屏画布的宽度 | -| height | number | 是 | - | 离屏画布的高度 | -| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ | +| width | number | 是 | 离屏画布的宽度 | +| height | number | 是 | 离屏画布的高度 | +| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | 见RenderingContextSettings接口描述。 | ## 属性 @@ -703,12 +703,12 @@ fillRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | - | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | +| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | +| width | number | 是 | 0 | 指定矩形的宽度。 | +| height | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -750,12 +750,12 @@ strokeRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------ | ---- | ---- | ------------ | - | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------ | ---- | ---- | ------------ | +| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | +| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | +| width | number | 是 | 0 | 指定矩形的宽度。 | +| height | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -796,12 +796,12 @@ clearRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | +| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | +| width | number | 是 | 0 | 指定矩形的宽度。 | +| height | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -844,12 +844,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | --------------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | --------------- | +| text | string | 是 | “” | 需要绘制的文本内容。 | +| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | +| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | +| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | **示例：** @@ -891,12 +891,12 @@ strokeText(text: string, x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | --------------- | +| text | string | 是 | “” | 需要绘制的文本内容。 | +| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | +| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | +| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| **示例：** @@ -938,33 +938,33 @@ measureText(text: string): TextMetrics **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | ---------- | - | text | string | 是 | "" | 需要进行测量的文本。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | ---------- | +| text | string | 是 | "" | 需要进行测量的文本。 | **返回值：** - | 类型 | 说明 | - | ----------- | ------- | - | TextMetrics | 文本的尺寸信息 | +| 类型 | 说明 | +| ----------- | ------- | +| TextMetrics | 文本的尺寸信息 | **TextMetrics类型描述:** - | 属性 | 类型 | 描述 | - | ----- | ------ | ------- | - | width | number | 字符串的宽度。 | - | height | number | 字符串的高度。 | - | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | - | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | - | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | - | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| - | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| - | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| - | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| - | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| - | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| - | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| - | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| +| 属性 | 类型 | 描述 | +| ----- | ------ | ------- | +| width | number | 字符串的宽度。 | +| height | number | 字符串的高度。 | +| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | +| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | +| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | +| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| +| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| +| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| +| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| +| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| +| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| +| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| +| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| **示例：** @@ -1007,9 +1007,9 @@ stroke(path?: Path2D): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ---------------------------------------- | ---- | ---- | ------------ | - | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ---------------------------------------- | ---- | ---- | ------------ | +| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | **示例：** @@ -1095,10 +1095,10 @@ moveTo(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | --------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | --------- | +| x | number | 是 | 0 | 指定位置的x坐标。 | +| y | number | 是 | 0 | 指定位置的y坐标。 | **示例：** @@ -1142,10 +1142,10 @@ lineTo(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | --------- | +| x | number | 是 | 0 | 指定位置的x坐标。 | +| y | number | 是 | 0 | 指定位置的y坐标。 | **示例：** @@ -1231,16 +1231,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | - | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | +| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | **示例：** @@ -1284,14 +1284,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | -------------- | - | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | - | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | - | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | - | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | - | x | number | 是 | 0 | 路径结束时的x坐标值。 | - | y | number | 是 | 0 | 路径结束时的y坐标值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------------- | +| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | +| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | +| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | +| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | +| x | number | 是 | 0 | 路径结束时的x坐标值。 | +| y | number | 是 | 0 | 路径结束时的y坐标值。 | **示例：** @@ -1335,12 +1335,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | ----------- | - | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | - | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | - | x | number | 是 | 0 | 路径结束时的x坐标值。 | - | y | number | 是 | 0 | 路径结束时的y坐标值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ----------- | +| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | +| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | +| x | number | 是 | 0 | 路径结束时的x坐标值。 | +| y | number | 是 | 0 | 路径结束时的y坐标值。 | **示例：** @@ -1384,14 +1384,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------------- | ------- | ---- | ----- | ---------- | - | x | number | 是 | 0 | 弧线圆心的x坐标值。 | - | y | number | 是 | 0 | 弧线圆心的y坐标值。 | - | radius | number | 是 | 0 | 弧线的圆半径。 | - | startAngle | number | 是 | 0 | 弧线的起始弧度。 | - | endAngle | number | 是 | 0 | 弧线的终止弧度。 | - | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------------- | ------- | ---- | ----- | ---------- | +| x | number | 是 | 0 | 弧线圆心的x坐标值。 | +| y | number | 是 | 0 | 弧线圆心的y坐标值。 | +| radius | number | 是 | 0 | 弧线的圆半径。 | +| startAngle | number | 是 | 0 | 弧线的起始弧度。 | +| endAngle | number | 是 | 0 | 弧线的终止弧度。 | +| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | **示例：** @@ -1434,13 +1434,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | --------------- | - | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | - | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | - | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | - | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | - | radius | number | 是 | 0 | 圆弧的圆半径值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | --------------- | +| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | +| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | +| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | +| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | +| radius | number | 是 | 0 | 圆弧的圆半径值。 | **示例：** @@ -1483,16 +1483,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------------- | ------- | ---- | ----- | ----------------- | - | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | - | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | - | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | - | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | - | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | - | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | - | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | - | counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ------------- | ------- | ---- | ----- | ----------------- | +| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | +| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | +| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | +| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | +| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | +| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | +| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | +| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | **示例：** @@ -1535,12 +1535,12 @@ rect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | +| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -1661,9 +1661,9 @@ rotate(angle: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ---------------------------------------- | - | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ---------------------------------------- | +| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | **示例：** @@ -1705,10 +1705,10 @@ scale(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | ----------- | - | x | number | 是 | 0 | 设置水平方向的缩放值。 | - | y | number | 是 | 0 | 设置垂直方向的缩放值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ----------- | +| x | number | 是 | 0 | 设置水平方向的缩放值。 | +| y | number | 是 | 0 | 设置垂直方向的缩放值。 | **示例：** @@ -1758,14 +1758,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ------ | ---- | ---- | -------- | - | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | - | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | - | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | - | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | - | e | number | 是 | 0 |translateX: 指定水平移动值。 | - | f | number | 是 | 0 |translateY: 指定垂直移动值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---------- | ------ | ---- | ---- | -------- | +| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | +| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | +| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | +| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | +| e | number | 是 | 0 |translateX: 指定水平移动值。 | +| f | number | 是 | 0 |translateY: 指定垂直移动值。 | **示例：** @@ -1813,14 +1813,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ------ | ---- | ---- | -------- | - | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | - | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | - | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | - | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | - | e | number | 是 | 0 |translateX: 指定水平移动值。 | - | f | number | 是 | 0 |translateY: 指定垂直移动值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---------- | ------ | ---- | ---- | -------- | +| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | +| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | +| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | +| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | +| e | number | 是 | 0 |translateX: 指定水平移动值。 | +| f | number | 是 | 0 |translateY: 指定垂直移动值。 | **示例：** @@ -1865,10 +1865,10 @@ translate(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | -------- | - | x | number | 是 | 0 | 设置水平平移量。 | - | y | number | 是 | 0 | 设置竖直平移量。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------- | +| x | number | 是 | 0 | 设置水平平移量。 | +| y | number | 是 | 0 | 设置竖直平移量。 | **示例：** @@ -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。 | - | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | - | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | - | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | - | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | - | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dw | number | 否 | 0 | 绘制区域的宽度。 | - | dh | number | 否 | 0 | 绘制区域的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------- | ---------------------------------------- | ---- | ---- | -------------------- | +| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../apis/js-apis-image.md#pixelmap7)| 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | +| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | +| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | +| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | +| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | +| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | +| dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | +| dw | number | 否 | 0 | 绘制区域的宽度。 | +| dh | number | 否 | 0 | 绘制区域的高度。 | **示例：** @@ -1968,10 +1968,10 @@ createImageData(sw: number, sh: number): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | sw | number | 是 | 0 | ImageData的宽度。 | - | sh | number | 是 | 0 | ImageData的高度。 | +| 参数 | 类型 | 必填 | 默认 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| sw | number | 是 | 0 | ImageData的宽度。 | +| sh | number | 是 | 0 | ImageData的高度。 | ### createImageData @@ -1982,15 +1982,15 @@ createImageData(imageData: ImageData): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认 | 描述 | - | --------- | ---------------------------------------- | ---- | ---- | ---------------- | - | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | +| 参数 | 类型 | 必填 | 默认 | 描述 | +| --------- | ---------------------------------------- | ---- | ---- | ---------------- | +| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | ### getPixelMap @@ -2000,18 +2000,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | - | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | - | sw | number | 是 | 0 | 需要输出的区域的宽度。 | - | sh | number | 是 | 0 | 需要输出的区域的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | +| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | +| sw | number | 是 | 0 | 需要输出的区域的宽度。 | +| sh | number | 是 | 0 | 需要输出的区域的高度。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | ### getImageData @@ -2022,18 +2022,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | - | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | - | sw | number | 是 | 0 | 需要输出的区域的宽度。 | - | sh | number | 是 | 0 | 需要输出的区域的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | --------------- | +| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | +| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | +| sw | number | 是 | 0 | 需要输出的区域的宽度。 | +| sh | number | 是 | 0 | 需要输出的区域的高度。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | ### putImageData @@ -2046,15 +2046,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ----------- | ------ | ---- | ------------ | ----------------------------- | - | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | - | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | - | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | - | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | - | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | - | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | - | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ----------- | ------ | ---- | ------------ | ----------------------------- | +| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | +| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | +| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | +| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | +| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | +| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | +| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | **示例：** @@ -2391,12 +2391,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | -------- | - | x0 | number | 是 | 0 | 起点的x轴坐标。 | - | y0 | number | 是 | 0 | 起点的y轴坐标。 | - | x1 | number | 是 | 0 | 终点的x轴坐标。 | - | y1 | number | 是 | 0 | 终点的y轴坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------- | +| x0 | number | 是 | 0 | 起点的x轴坐标。 | +| y0 | number | 是 | 0 | 起点的y轴坐标。 | +| x1 | number | 是 | 0 | 终点的x轴坐标。 | +| y1 | number | 是 | 0 | 终点的y轴坐标。 | **示例：** @@ -2443,14 +2443,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | ----------------- | - | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | - | y0 | number | 是 | 0 | 起始圆的y轴坐标。 | - | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | - | x1 | number | 是 | 0 | 终点圆的x轴坐标。 | - | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | - | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ----------------- | +| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | +| y0 | number | 是 | 0 | 起始圆的y轴坐标。 | +| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | +| x1 | number | 是 | 0 | 终点圆的x轴坐标。 | +| y1 | number | 是 | 0 | 终点圆的y轴坐标。 | +| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | **示例：** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index dfdb662cfcb64833e190021263d4accc3c9fb767..2344c69cbea74ff42757f91152fc3aa9d3fc006b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -9,9 +9,9 @@ ## 属性 -| 名称 | 参数 | 参数描述 | -| ---------------- | ---------------------------------------- | ---------------------------------------- | -| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
-  id：设置组件的id。
-  duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-appendix-enums.md#curve) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | +| 名称 | 参数 | 参数描述 | +| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| sharedTransition | id: string,
{
 duration?: number,
 curve?: Curve \| string,
 delay?: number,
 motionPath?:
{
 path: string,
 form?: number,
 to?: number,
 rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
- id：设置组件的id。
- duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-appendix-enums.md#curve) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md index 6f8902fb7626655e717ca8742fc90f2a564eeacb..ff65b1cabc38986ba0d85f33746935b90ddc089b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -12,15 +12,15 @@ | onClick(event: (event?: ClickEvent) => void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 | ## ClickEvent对象说明 -| 属性名称 | 类型 | 描述 | -| ---------------------- | ------------------------------------ | ------------------------------------- | -| screenX | number | 点击点相对于设备屏幕左边沿的X坐标。 | -| screenY | number | 点击点相对于设备屏幕上边沿的Y坐标。 | -| x | number | 点击点相对于被点击元素左边沿的X坐标。 | -| y | number | 点击点相对于被点击元素上边沿的Y坐标。 | -| target8+ | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 | -| timestamp8+ | number | 事件时间戳。 | -| source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | +| 属性名称 | 类型 | 描述 | +| ---------------------- | ------------------------------------ | -------------------------------------------------------- | +| screenX | number | 点击点相对于应用窗口左上角的X坐标。 | +| screenY | number | 点击点相对于应用窗口左上角的Y坐标。 | +| x | number | 点击点相对于被点击元素左边沿的X坐标。 | +| y | number | 点击点相对于被点击元素上边沿的Y坐标。 | +| target8+ | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 | +| timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | +| source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | ## EventTarget8+对象说明 | 名称 | 参数类型 | 描述 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md index 9f94105c21c5eee879c1ce401df723112bfe6086..faec03058a1f0f80e654f06db62e18b366cfd581 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -14,27 +14,27 @@ ## TouchEvent对象说明 - | 名称 | 类型 | 描述 | - | ------------------- | ---------------------------------------- | ------------ | - | type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | - | touches | Array<[TouchObject](#touchobject对象说明)> | 全部手指信息。 | - | changedTouches | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 | - | stopPropagation | () => void | 阻塞事件冒泡。 | - | timestamp8+ | number | 事件时间戳。 | - | target8+ | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | - | source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | +| 名称 | 类型 | 描述 | +| ------------------- | ---------------------------------------- | ------------ | +| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | +| touches | Array<[TouchObject](#touchobject对象说明)> | 全部手指信息。 | +| changedTouches | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 | +| stopPropagation | () => void | 阻塞事件冒泡。 | +| timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | +| target8+ | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | +| source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | ## TouchObject对象说明 -| 名称 | 类型 | 描述 | -| ------- | --------------------------- | ------------------- | -| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | -| id | number | 手指唯一标识符。 | -| screenX | number | 触摸点相对于设备屏幕左边沿的X坐标。 | -| screenY | number | 触摸点相对于设备屏幕上边沿的Y坐标。 | -| x | number | 触摸点相对于被触摸元素左边沿的X坐标。 | -| y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 | +| 名称 | 类型 | 描述 | +| ------- | ------------------------------------------- | ------------------------------------- | +| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | +| id | number | 手指唯一标识符。 | +| screenX | number | 触摸点相对于应用窗口左上角的X坐标。 | +| screenY | number | 触摸点相对于应用窗口左上角的Y坐标。 | +| x | number | 触摸点相对于被触摸元素左边沿的X坐标。 | +| y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md index 2264ace64b057a1b55edc3d52c4e84d8a28d0fa6..fa742aad6d3f657a23ecde3441b0ab4fb09a6bc1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md @@ -17,14 +17,14 @@ | 名称 | 属性类型 | 描述 | | --------- | ------------------------------- | -------------------- | -| screenX | number | 点击触点相对于屏幕左上角的x轴坐标。 | -| screenY | number | 点击触点相对于屏幕左上角的y轴坐标。 | +| screenX | number | 点击触点相对于应用窗口左上角的x轴坐标。 | +| screenY | number | 点击触点相对于应用窗口左上角的y轴坐标。 | | x | number | 点击触点相对于当前组件左上角的x轴坐标。 | | y | number | 点击触点相对于当前组件左上角的y轴坐标。 | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | | action | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。 | | stopPropagation | () => void | 阻塞事件冒泡。 | -| timestamp8+ | number | 事件时间戳。 | +| timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | | target8+ | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | | source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index 08e119eb28eaddd337a300875e53cefd6efdee3a..98c48b818b54420b3c838491f73fe5c56a92f9fa 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -14,7 +14,7 @@ ## 主要特征 -- UI组件：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 +- UI组件：方舟开发框架不仅提供了多种基础组件， 例如文本、图片、按钮等 ，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 - 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 diff --git a/zh-cn/application-dev/ui/figures/custom-dialog-demo.gif b/zh-cn/application-dev/ui/figures/custom-dialog-demo.gif new file mode 100644 index 0000000000000000000000000000000000000000..8d0979823e13f959b2a4828f479af7bbc03f69f3 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/custom-dialog-demo.gif differ diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md index 9aac5acd159d34fd1fa19ca2370155b71da2b8f5..5eb1398708ea343b181a8a9abbe741996af64577 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-js.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md @@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 images: [ { src: '/common/frame1.png' }, { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], + { src: '/common/frame3.png' } + ] }, handleClick() { const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 @@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 images: [ { src: '/common/frame1.png' }, { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], + { src: '/common/frame3.png' } + ] }, handleClick() { const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 diff --git a/zh-cn/application-dev/ui/ts-component-based-customdialog.md b/zh-cn/application-dev/ui/ts-component-based-customdialog.md index 72b8c9cb6b64b2e410caff9dc3934d6cc171c4aa..523343054067927cdc8e7d1361e02c90332caeec 100644 --- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -47,3 +47,5 @@ struct CustomDialogUser { } } ``` + + ![custom-dialog-demo](figures/custom-dialog-demo.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md index f5e8690de8ab83fbecaf8ba481c2af6313fcb7b5..2345c9123ba3a8e6a630ba11f8c5d1e11aa4f741 100644 --- a/zh-cn/application-dev/ui/ui-js-components-path2d.md +++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md @@ -68,7 +68,7 @@ export default { path.moveTo(600, 535); path.arc(520, 450, 85, 0, 6); ctx.stroke(path); - }, + } } ``` @@ -131,51 +131,66 @@ text{ ``` // xxx.js import prompt from '@system.prompt'; + export default { - data:{ - ctx: null, - path1: null, - path2: null, - path3: null, - isAdd: "addPath2", - isChange: true, - textName: 'change' - }, - onShow(){ - this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); - this.path1 = this.ctx.createPath2D(); - this.path1.moveTo(200, 200); - this.path1.lineTo(400, 200); - this.path1.lineTo(400, 400); - this.path1.lineTo(200, 400); - this.path1.closePath(); - this.path2 = this.ctx.createPath2D(); - this.path2.arc(300, 300, 75, 0, 6.28) - this.ctx.stroke(this.path1); - }, - addPath(){ - if(this.isAdd == "addPath2"){ - this.ctx.clearRect(0,0,600,600) - this.ctx.beginPath(); - this.path2.addPath(this.path1) - this.ctx.stroke(this.path2); - this.isAdd = "clearPath2" - }else{ - this.ctx.clearRect(0,0,600,600) - this.ctx.stroke(this.path1); this.isAdd = "addPath2" - } - }, - setTransform(){ - if(this.isChange){ - this.ctx.clearRect(0,0,600,600) - this.path3 = this.ctx.createPath2D(); - this.path3.arc(150, 150, 100, 0, 6.28) - this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); this.ctx.stroke(this.path3); this.isChange = !this.isChange; this.textName = "back" - }else{ - this.ctx.clearRect(0,0,600,600) - this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);this.ctx.stroke(this.path3);this.isChange = !this.isChange; this.textName = "change" + data: { + ctx: null, + path1: null, + path2: null, + path3: null, + isAdd: "addPath2", + isChange: true, + textName: 'change' + }, + onShow() { + this.ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }); + this.path1 = this.ctx.createPath2D(); + // 正方形 + this.path1.moveTo(200, 200); + this.path1.lineTo(400, 200); + this.path1.lineTo(400, 400); + this.path1.lineTo(200, 400); + this.path1.closePath(); + this.path2 = this.ctx.createPath2D(); + // 圆形 + this.path2.arc(300, 300, 75, 0, 6.28); + this.ctx.stroke(this.path1); + }, + addPath() { + if (this.isAdd == "addPath2") { + // 删除指定指定区域的绘制内容 + this.ctx.clearRect(0, 0, 600, 600); + this.ctx.beginPath(); + // 将另一个的路径添加到当前路径对象中 + this.path2.addPath(this.path1); + this.ctx.stroke(this.path2); + this.isAdd = "clearPath2"; + } else { + this.ctx.clearRect(0, 0, 600, 600); + this.ctx.stroke(this.path1); + this.isAdd = "addPath2"; + } + }, + setTransform() { + if (this.isChange) { + this.ctx.clearRect(0, 0, 600, 600); + this.path3 = this.ctx.createPath2D(); + this.path3.arc(150, 150, 100, 0, 6.28); + // 重置现有的变换矩阵并创建新的变换矩阵 + this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "back" + } else { + this.ctx.clearRect(0, 0, 600, 600); + this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "change"; + } } - }, } ``` diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md index 6246ee523ea8676d0bdb500def97cd88c586a2d7..2ce0276cfa511d524f44c059d96c9f3352b4efc9 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md @@ -320,7 +320,7 @@ } ``` - 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件的去初始化的时机执行。 +​ 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件销毁之前的时机执行。 ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md index ec103e4e07a3e4e52cd9e2de53f066a321cf2137..4434c8b5072eef327e30a7baf9ff466a871aad60 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md @@ -130,7 +130,7 @@ listener.on('change', onPortrait) } aboutToAppear() { - portraitFunc = this.onPortrait.bind(this) //bind current js instance + portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例 this.listener.on('change', portraitFunc) }