Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 d924661f 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!3243 VOD+格式修改 

Merge pull request !3243 from LiAn/OpenHarmony-3.1-Release
上级 c1ef03d0 50d46184
隐藏空白更改
内联 并排
Showing with 532 addition and 523 deletion
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ d924661f
...@@ -35,35 +35,37 @@ ...@@ -35,35 +35,37 @@
} }
} }
``` ```
- 示意图（关闭抗锯齿） - 示意图（关闭抗锯齿）
![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png) ![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png)
- 示意图（开启抗锯齿） - 示意图（开启抗锯齿）
![zh-cn_image_0000001127125162](figures/zh-cn_image_0000001127125162.png) ![zh-cn_image_0000001127125162](figures/zh-cn_image_0000001127125162.png)
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 | | [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | | [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 | | [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;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-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family"<sup>5+</sup><br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：normal,&nbsp;italic。<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-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family"<sup>5+</sup><br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：normal,&nbsp;italic。<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&nbsp;基线，那么ideographic基线位置在字符本身的底部。<br/>-&nbsp;bottom：文本基线在文本块的底部。&nbsp;与&nbsp;ideographic&nbsp;基线的区别在于&nbsp;ideographic&nbsp;基线不需要考虑下行字母。 | | [textBaseline](#textbaseline) | string | alphabetic | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;alphabetic：文本基线是标准的字母基线。<br/>-&nbsp;top：文本基线在文本块的顶部。<br/>-&nbsp;hanging：文本基线是悬挂基线。<br/>-&nbsp;middle：文本基线在文本块的中间。<br/>-&nbsp;ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic&nbsp;基线，那么ideographic基线位置在字符本身的底部。<br/>-&nbsp;bottom：文本基线在文本块的底部。&nbsp;与&nbsp;ideographic&nbsp;基线的区别在于&nbsp;ideographic&nbsp;基线不需要考虑下行字母。 |
| [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](#globalcompositeoperation) | string | source-over | 设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考[表 类型字段说明](#globalcompositeoperation)。 |
| [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](#imagesmoothingenabled6)<sup>6+</sup> | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | | [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
### fillStyle ### fillStyle
...@@ -379,19 +381,19 @@ export default { ...@@ -379,19 +381,19 @@ export default {
### 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 | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
- 示例 - 示例
``` ```
...@@ -568,12 +570,12 @@ fillRect(x: number, y: number, width:number, height: number): void ...@@ -568,12 +570,12 @@ fillRect(x: number, y: number, width:number, height: number): void
填充一个矩形。 填充一个矩形。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ------------- |
| x | number | 指定矩形左上角点的x坐标。 | | x | number | 指定矩形左上角点的x坐标。 |
| y | number | 指定矩形左上角点的y坐标。 | | y | number | 指定矩形左上角点的y坐标。 |
| width | number | 指定矩形的宽度。 | | width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 | | height | number | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -603,12 +605,12 @@ clearRect(x: number, y: number, width:number, height: number): void ...@@ -603,12 +605,12 @@ clearRect(x: number, y: number, width:number, height: number): void
删除指定区域内的绘制内容。 删除指定区域内的绘制内容。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ------------- |
| x | number | 指定矩形上的左上角x坐标。 | | x | number | 指定矩形上的左上角x坐标。 |
| y | number | 指定矩形上的左上角y坐标。 | | y | number | 指定矩形上的左上角y坐标。 |
| width | number | 指定矩形的宽度。 | | width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 | | height | number | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -641,12 +643,12 @@ strokeRect(x: number, y: number, width:number, height: number): void ...@@ -641,12 +643,12 @@ strokeRect(x: number, y: number, width:number, height: number): void
绘制具有边框的矩形，矩形内部不填充。 绘制具有边框的矩形，矩形内部不填充。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ------------ |
| x | number | 指定矩形的左上角x坐标。 | | x | number | 指定矩形的左上角x坐标。 |
| y | number | 指定矩形的左上角y坐标。 | | y | number | 指定矩形的左上角y坐标。 |
| width | number | 指定矩形的宽度。 | | width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 | | height | number | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -677,11 +679,11 @@ fillText(text: string, x: number, y: number): void ...@@ -677,11 +679,11 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。 绘制填充类文本。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 | | text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 | | x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 | | y | number | 需要绘制的文本的左下角y坐标。 |
- 示例 - 示例
``` ```
...@@ -712,11 +714,11 @@ strokeText(text: string, x: number, y: number): void ...@@ -712,11 +714,11 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。 绘制描边类文本。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 | | text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 | | x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 | | y | number | 需要绘制的文本的左下角y坐标。 |
- 示例 - 示例
``` ```
...@@ -747,13 +749,13 @@ measureText(text: string): TextMetrics ...@@ -747,13 +749,13 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | ---------- |
| text | string | 需要进行测量的文本。 | | text | string | 需要进行测量的文本。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----------- | -------------------------------------- |
| TextMetrics | 包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。 | | TextMetrics | 包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。 |
- 示例 - 示例
...@@ -850,10 +852,10 @@ moveTo(x: number, y: number): void ...@@ -850,10 +852,10 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。 路径从当前点移动到指定点。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 | | y | number | 指定位置的y坐标。 |
- 示例 - 示例
``` ```
...@@ -886,10 +888,10 @@ lineTo(x: number, y: number): void ...@@ -886,10 +888,10 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。 从当前点到指定点进行路径连接。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 | | y | number | 指定位置的y坐标。 |
- 示例 - 示例
``` ```
...@@ -954,14 +956,14 @@ createPattern(image: Image, repetition: string): Object ...@@ -954,14 +956,14 @@ createPattern(image: Image, repetition: string): Object
通过指定图像和重复方式创建图片填充的模板。 通过指定图像和重复方式创建图片填充的模板。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---------- | ------ | ---------------------------------------- |
| image | Image | 图源对象，具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 | | image | Image | 图源对象，具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| repetition | string | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ----------------- |
| Object | 指定图像填充的Pattern对象。 | | Object | 指定图像填充的Pattern对象。 |
- 示例 - 示例
...@@ -996,14 +998,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -996,14 +998,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 第一个贝塞尔参数的y坐标值。 | | cp1y | number | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 第二个贝塞尔参数的x坐标值。 | | cp2x | number | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 第二个贝塞尔参数的y坐标值。 | | cp2y | number | 第二个贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 | | x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 | | y | number | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```
...@@ -1036,12 +1038,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1036,12 +1038,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 | | cpx | number | 贝塞尔参数的x坐标值。 |
| cpy | number | 贝塞尔参数的y坐标值。 | | cpy | number | 贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 | | x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 | | y | number | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```
...@@ -1074,13 +1076,13 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1074,13 +1076,13 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。 绘制弧线路径。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 | | x | number | 弧线圆心的x坐标值。 |
| y | number | 弧线圆心的y坐标值。 | | y | number | 弧线圆心的y坐标值。 |
| radius | number | 弧线的圆半径。 | | radius | number | 弧线的圆半径。 |
| startAngle | number | 弧线的起始弧度。 | | startAngle | number | 弧线的起始弧度。 |
| endAngle | number | 弧线的终止弧度。 | | endAngle | number | 弧线的终止弧度。 |
| anticlockwise | boolean | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 是否逆时针绘制圆弧。 |
- 示例 - 示例
...@@ -1113,13 +1115,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1113,13 +1115,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 圆弧经过的第一个点的y坐标值。 | | y1 | number | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 圆弧经过的第二个点的x坐标值。 | | x2 | number | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 圆弧经过的第二个点的y坐标值。 | | y2 | number | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 圆弧的圆半径值。 | | radius | number | 圆弧的圆半径值。 |
- 示例 - 示例
``` ```
...@@ -1151,15 +1153,15 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1151,15 +1153,15 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。 在规定的矩形区域绘制一个椭圆。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 | | x | number | 椭圆圆心的x轴坐标。 |
| y | number | 椭圆圆心的y轴坐标。 | | y | number | 椭圆圆心的y轴坐标。 |
| radiusX | number | 椭圆x轴的半径长度。 | | radiusX | number | 椭圆x轴的半径长度。 |
| radiusY | number | 椭圆y轴的半径长度。 | | radiusY | number | 椭圆y轴的半径长度。 |
| rotation | number | 椭圆的旋转角度，单位为弧度。 | | rotation | number | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 | | startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 | | endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | | anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例 - 示例
...@@ -1192,12 +1194,12 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1192,12 +1194,12 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。 创建矩形路径。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 | | x | number | 指定矩形的左上角x坐标值。 |
| y | number | 指定矩形的左上角y坐标值。 | | y | number | 指定矩形的左上角y坐标值。 |
| width | number | 指定矩形的宽度。 | | width | number | 指定矩形的宽度。 |
| height | number | 指定矩形的高度。 | | height | number | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -1288,8 +1290,8 @@ rotate(rotate: number): void ...@@ -1288,8 +1290,8 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。 针对当前坐标轴进行顺时针旋转。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ---------------------------------------- |
| rotate | number | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | rotate | number | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例 - 示例
...@@ -1321,10 +1323,10 @@ scale(x: number, y: number): void ...@@ -1321,10 +1323,10 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | ----------- |
| x | number | 设置水平方向的缩放值。 | | x | number | 设置水平方向的缩放值。 |
| y | number | 设置垂直方向的缩放值。 | | y | number | 设置垂直方向的缩放值。 |
- 示例 - 示例
``` ```
...@@ -1357,18 +1359,18 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1357,18 +1359,18 @@ 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 | 指定水平缩放值。 | | scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 | | skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 | | skewY | number | 指定垂直倾斜值。 |
| scaleY | number | 指定垂直缩放值。 | | scaleY | number | 指定垂直缩放值。 |
| translateX | number | 指定水平移动值。 | | translateX | number | 指定水平移动值。 |
| translateY | number | 指定垂直移动值。 | | translateY | number | 指定垂直移动值。 |
...@@ -1407,12 +1409,12 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl ...@@ -1407,12 +1409,12 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 | | scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 | | skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 | | skewY | number | 指定垂直倾斜值。 |
| scaleY | number | 指定垂直缩放值。 | | scaleY | number | 指定垂直缩放值。 |
| translateX | number | 指定水平移动值。 | | translateX | number | 指定水平移动值。 |
| translateY | number | 指定垂直移动值。 | | translateY | number | 指定垂直移动值。 |
...@@ -1448,10 +1450,10 @@ translate(x: number, y: number): void ...@@ -1448,10 +1450,10 @@ translate(x: number, y: number): void
移动当前坐标系的原点。 移动当前坐标系的原点。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | -------- |
| x | number | 设置水平平移量。 | | x | number | 设置水平平移量。 |
| y | number | 设置竖直平移量。 | | y | number | 设置竖直平移量。 |
- 示例 - 示例
``` ```
...@@ -1483,9 +1485,9 @@ createPath2D(path: Path2D, cmds: string): Path2D ...@@ -1483,9 +1485,9 @@ createPath2D(path: Path2D, cmds: string): Path2D
创建一个Path2D对象。 创建一个Path2D对象。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | -------------- |
| path | Path2D | Path2D对象。 | | path | Path2D | Path2D对象。 |
| cmds | string | SVG的Path描述字符串。 | | cmds | string | SVG的Path描述字符串。 |
- 返回值 - 返回值
...@@ -1528,17 +1530,17 @@ drawImage(image: Image, sx: number, sy: number, sWidth: number, sHeight: number, ...@@ -1528,17 +1530,17 @@ drawImage(image: Image, sx: number, sy: number, sWidth: number, sHeight: number,
进行图像绘制。 进行图像绘制。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | ------ | ---------------------------------------- |
| image | Image | 图片资源，请参考[Image对象](../arkui-js/js-components-canvas-image.md)。 | | image | Image | 图片资源，请参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| sx | number | 裁切源图像时距离源图像左上角的x坐标值。 | | sx | number | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 裁切源图像时距离源图像左上角的y坐标值。 | | sy | number | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 裁切源图像时需要裁切的宽度。 | | sWidth | number | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 裁切源图像时需要裁切的高度。 | | sHeight | number | 裁切源图像时需要裁切的高度。 |
| dx | number | 绘制区域左上角在x轴的位置。 | | dx | number | 绘制区域左上角在x轴的位置。 |
| dy | number | 绘制区域左上角在y&nbsp;轴的位置。 | | dy | number | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 绘制区域的宽度。 | | dWidth | number | 绘制区域的宽度。 |
| dHeight | number | 绘制区域的高度。 | | dHeight | number | 绘制区域的高度。 |
- 示例 - 示例
``` ```
...@@ -1620,16 +1622,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object ...@@ -1620,16 +1622,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md)。 创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md)。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | -------- |
| x0 | number | 起点的x轴坐标。 | | x0 | number | 起点的x轴坐标。 |
| y0 | number | 起点的y轴坐标。 | | y0 | number | 起点的y轴坐标。 |
| x1 | number | 终点的x轴坐标。 | | x1 | number | 终点的x轴坐标。 |
| y1 | number | 终点的y轴坐标。 | | y1 | number | 终点的y轴坐标。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 | | Object | 返回创建的CanvasGradient对象。 |
- 示例 - 示例
...@@ -1669,18 +1671,18 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -1669,18 +1671,18 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient 创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | ----------------- |
| x0 | number | 起始圆的x轴坐标。 | | x0 | number | 起始圆的x轴坐标。 |
| y0 | number | 起始圆的y轴坐标。 | | y0 | number | 起始圆的y轴坐标。 |
| r0 | number | 起始圆的半径。必须是非负且有限的。 | | r0 | number | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 终点圆的x轴坐标。 | | x1 | number | 终点圆的x轴坐标。 |
| y1 | number | 终点圆的y轴坐标。 | | y1 | number | 终点圆的y轴坐标。 |
| r1 | number | 终点圆的半径。必须为非负且有限的。 | | r1 | number | 终点圆的半径。必须为非负且有限的。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 | | Object | 返回创建的CanvasGradient对象。 |
- 示例 - 示例
...@@ -1720,15 +1722,15 @@ createImageData(width: number, height: number, imageData: Object): Object ...@@ -1720,15 +1722,15 @@ createImageData(width: number, height: number, imageData: Object): Object
创建新的ImageData 对象，请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md)。 创建新的ImageData 对象，请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md)。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | --------- | ------ | ----------------- |
| width | number | ImageData的宽度。 | | width | number | ImageData的宽度。 |
| height | number | ImageData的高度。 | | height | number | ImageData的高度。 |
| imagedata | Object | 复制现有的ImageData对象。 | | imagedata | Object | 复制现有的ImageData对象。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ----------------- |
| Object | 返回创建的ImageData对象。 | | Object | 返回创建的ImageData对象。 |
- 示例 - 示例
...@@ -1758,16 +1760,16 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1758,16 +1760,16 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建ImageData对象。 以当前canvas指定区域内的像素创建ImageData对象。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | --------------- |
| sx | number | 需要输出的区域的左上角x坐标。 | | sx | number | 需要输出的区域的左上角x坐标。 |
| sy | number | 需要输出的区域的左上角y坐标。 | | sy | number | 需要输出的区域的左上角y坐标。 |
| sw | number | 需要输出的区域的宽度。 | | sw | number | 需要输出的区域的宽度。 |
| sh | number | 需要输出的区域的高度。 | | sh | number | 需要输出的区域的高度。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | ----------------------- |
| Object | 返回包含指定区域像素的ImageData对象。 | | Object | 返回包含指定区域像素的ImageData对象。 |
- 示例 - 示例
...@@ -1796,15 +1798,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: ...@@ -1796,15 +1798,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
使用ImageData数据填充新的矩形区域。 使用ImageData数据填充新的矩形区域。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ----------- | ------ | ----------------------------- |
| imagedata | Object | 包含像素值的ImageData对象。 | | imagedata | Object | 包含像素值的ImageData对象。 |
| dx | number | 填充区域在x轴方向的偏移量。 | | dx | number | 填充区域在x轴方向的偏移量。 |
| dy | number | 填充区域在y轴方向的偏移量。 | | dy | number | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | | dirtyX | number | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | | dirtyY | number | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 源图像数据矩形裁切范围的宽度。 | | dirtyWidth | number | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 源图像数据矩形裁切范围的高度。 | | dirtyHeight | number | 源图像数据矩形裁切范围的高度。 |
- 示例 - 示例
``` ```
...@@ -1841,8 +1843,8 @@ setLineDash(segments: Array): void ...@@ -1841,8 +1843,8 @@ setLineDash(segments: Array): void
设置画布的虚线样式。 设置画布的虚线样式。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | -------- | ----- | -------------------- |
| segments | Array | 作为数组用来描述线段如何交替和间距长度。 | | segments | Array | 作为数组用来描述线段如何交替和间距长度。 |
- 示例 - 示例
...@@ -1875,8 +1877,8 @@ getLineDash(): Array ...@@ -1875,8 +1877,8 @@ getLineDash(): Array
获得当前画布的虚线样式。 获得当前画布的虚线样式。
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----- | ------------------------ |
| Array | 返回数组，该数组用来描述线段如何交替和间距长度。 | | Array | 返回数组，该数组用来描述线段如何交替和间距长度。 |
- 示例 - 示例
...@@ -1905,8 +1907,8 @@ transferFromImageBitmap(bitmap: ImageBitmap): void ...@@ -1905,8 +1907,8 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
显示给定的ImageBitmap对象。 显示给定的ImageBitmap对象。
- 参数 - 参数
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | 待显示的ImageBitmap对象。 | | bitmap | ImageBitmap | 待显示的ImageBitmap对象。 |
- 示例 - 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ d924661f
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
## 导入模块 ## 导入模块
``` ```
import lottie from 'lottie-ohos-ets' import lottie from '@ohos/lottieETS'
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 在Terminal窗口使用 npm install 'lottie-ohos-ets'命令下载Lottie。 > 在Terminal窗口使用 `npm install @ohos/lottieETS` 命令下载Lottie。
## lottie.loadAnimation ## lottie.loadAnimation
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ d924661f
# OffscreenCanvasRenderingConxt2D对象 # OffscreenCanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -12,35 +12,35 @@ ...@@ -12,35 +12,35 @@
OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| width | number | 是 | - | 离屏画布的宽度 | | width | number | 是 | - | 离屏画布的宽度 |
| height | number | 是 | - | 离屏画布的高度 | | height | number | 是 | - | 离屏画布的高度 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 |
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [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时，表示渐变对象，使用&nbsp;[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时，表示渐变对象，使用&nbsp;[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',&nbsp;'italic'。<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',&nbsp;'italic'。<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&nbsp;基线不需要考虑下行字母。 | | [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&nbsp;基线不需要考虑下行字母。 |
| [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'。
...@@ -450,19 +450,19 @@ struct LineDashOffset { ...@@ -450,19 +450,19 @@ 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 | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
``` ```
@Entry @Entry
...@@ -684,12 +684,12 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -684,12 +684,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 | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -728,12 +728,12 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -728,12 +728,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 | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -771,12 +771,12 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -771,12 +771,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 | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -816,11 +816,11 @@ fillText(text: string, x: number, y: number): void ...@@ -816,11 +816,11 @@ 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坐标。 |
- 示例 - 示例
``` ```
...@@ -859,11 +859,11 @@ strokeText(text: string, x: number, y: number): void ...@@ -859,11 +859,11 @@ 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坐标。 |
- 示例 - 示例
``` ```
...@@ -902,19 +902,19 @@ measureText(text: string): TextMetrics ...@@ -902,19 +902,19 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 | | text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值 - 返回值
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述 - TextMetrics类型描述
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | width | number | 字符串的宽度。 |
- 示例 - 示例
``` ```
...@@ -954,9 +954,9 @@ stroke(path?: Path2D): void ...@@ -954,9 +954,9 @@ stroke(path?: Path2D): void
进行边框绘制操作。 进行边框绘制操作。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例 - 示例
``` ```
...@@ -1037,10 +1037,10 @@ moveTo(x: number, y: number): void ...@@ -1037,10 +1037,10 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。 路径从当前点移动到指定点。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 - 示例
``` ```
...@@ -1081,10 +1081,10 @@ lineTo(x: number, y: number): void ...@@ -1081,10 +1081,10 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。 从当前点到指定点进行路径连接。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 - 示例
``` ```
...@@ -1165,10 +1165,10 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern ...@@ -1165,10 +1165,10 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
通过指定图像和重复方式创建图片填充的模板。 通过指定图像和重复方式创建图片填充的模板。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| 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'。 |
- 示例 - 示例
``` ```
...@@ -1209,14 +1209,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1209,14 +1209,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坐标值。 |
- 示例 - 示例
``` ```
...@@ -1257,12 +1257,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1257,12 +1257,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坐标值。 |
- 示例 - 示例
``` ```
...@@ -1303,14 +1303,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1303,14 +1303,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 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 - 示例
``` ```
...@@ -1350,13 +1350,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1350,13 +1350,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 | 圆弧的圆半径值。 |
- 示例 - 示例
``` ```
...@@ -1396,16 +1396,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1396,16 +1396,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 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
- 示例 - 示例
...@@ -1446,12 +1446,12 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1446,12 +1446,12 @@ 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 | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -1565,9 +1565,9 @@ rotate(rotate: number): void ...@@ -1565,9 +1565,9 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。 针对当前坐标轴进行顺时针旋转。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例 - 示例
``` ```
...@@ -1606,10 +1606,10 @@ scale(x: number, y: number): void ...@@ -1606,10 +1606,10 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例 - 示例
``` ```
...@@ -1650,20 +1650,20 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1650,20 +1650,20 @@ 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 | 指定垂直移动值。 |
- 示例 - 示例
``` ```
...@@ -1708,14 +1708,14 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl ...@@ -1708,14 +1708,14 @@ 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 | 指定垂直移动值。 |
- 示例 - 示例
``` ```
...@@ -1757,10 +1757,10 @@ translate(x: number, y: number): void ...@@ -1757,10 +1757,10 @@ translate(x: number, y: number): void
移动当前坐标系的原点。 移动当前坐标系的原点。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
- 示例 - 示例
``` ```
...@@ -1804,17 +1804,17 @@ drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: n ...@@ -1804,17 +1804,17 @@ drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: n
进行图像绘制。 进行图像绘制。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---- | ---- | -------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图片资源，请参考ImageBitmap。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图片资源，请参考ImageBitmap。 |
| 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 | 绘制区域的高度。 |
- 示例 - 示例
...@@ -1854,10 +1854,10 @@ createImageData(width: number, height: number): Object ...@@ -1854,10 +1854,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
...@@ -1867,9 +1867,9 @@ createImageData(imageData: ImageData): Object ...@@ -1867,9 +1867,9 @@ createImageData(imageData: ImageData): Object
根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---- | ---- | ---------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 |
### getImageData ### getImageData
...@@ -1879,12 +1879,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1879,12 +1879,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
...@@ -1894,15 +1894,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1894,15 +1894,15 @@ 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的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例 - 示例
``` ```
...@@ -2013,12 +2013,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2013,12 +2013,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轴坐标。 |
- 示例 - 示例
``` ```
...@@ -2062,14 +2062,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2062,14 +2062,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/ui/ui-ts-basic-components-button.md
浏览文件 @ d924661f
...@@ -8,10 +8,11 @@ Button是按钮组件，通常用于响应用户的点击操作，如提交表 ...@@ -8,10 +8,11 @@ Button是按钮组件，通常用于响应用户的点击操作，如提交表
Button通过调用接口来创建，接口调用有以下两种形式： Button通过调用接口来创建，接口调用有以下两种形式：
- Button(options?: {type?: ButtonType, stateEffect?: boolean}) - 创建包含子组件的按钮
该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
`Button(options?: {type?: ButtonType, stateEffect?: boolean})`，该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
``` ```
Button({ type: ButtonType.Normal, stateEffect: true }) { Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() { Row() {
...@@ -23,10 +24,11 @@ Button通过调用接口来创建，接口调用有以下两种形式： ...@@ -23,10 +24,11 @@ Button通过调用接口来创建，接口调用有以下两种形式：
![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png) ![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png)
- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean }) - 创建不包含子组件的按钮
该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
`Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`，该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
``` ```
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8) .borderRadius(8)
...@@ -42,7 +44,7 @@ Button通过调用接口来创建，接口调用有以下两种形式： ...@@ -42,7 +44,7 @@ Button通过调用接口来创建，接口调用有以下两种形式：
Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆形按钮）和Normal（普通按钮），通过type进行设置。 Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆形按钮）和Normal（普通按钮），通过type进行设置。
- 胶囊按钮（默认类型） - 胶囊按钮（默认类型）
``` ```
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
...@@ -52,7 +54,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -52,7 +54,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
![zh-cn_image_0000001215645452](figures/zh-cn_image_0000001215645452.png) ![zh-cn_image_0000001215645452](figures/zh-cn_image_0000001215645452.png)
- 圆形按钮 - 圆形按钮
``` ```
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) Button('Circle', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
...@@ -68,7 +70,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -68,7 +70,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
- 设置边框弧度 - 设置边框弧度
一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。 一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
``` ```
Button('circle border', { type: ButtonType.Normal }) Button('circle border', { type: ButtonType.Normal })
.borderRadius(20) .borderRadius(20)
...@@ -79,7 +81,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -79,7 +81,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
- 设置文本样式 - 设置文本样式
通过添加文本样式设置按钮文本的展示样式。 通过添加文本样式设置按钮文本的展示样式。
``` ```
Button('font style', { type: ButtonType.Normal }) Button('font style', { type: ButtonType.Normal })
.fontSize(20) .fontSize(20)
...@@ -92,7 +94,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -92,7 +94,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
- 设置背景颜色 - 设置背景颜色
添加backgroundColor属性设置按钮的背景颜色。 添加backgroundColor属性设置按钮的背景颜色。
``` ```
Button('background color').backgroundColor(0xF55A42) Button('background color').backgroundColor(0xF55A42)
``` ```
...@@ -102,7 +104,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -102,7 +104,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
- 用作功能型按钮 - 用作功能型按钮
为删除操作创建一个按钮。 为删除操作创建一个按钮。
``` ```
Button({ type: ButtonType.Circle, stateEffect: true }) { Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.ic_public_delete_filled')).width(30).height(30) Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
...@@ -133,7 +135,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -133,7 +135,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
``` ```
import router from '@ohos.router' import router from '@ohos.router'
@Entry @Entry
@Component @Component
struct ButtonCase1 { struct ButtonCase1 {
...@@ -144,13 +146,13 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -144,13 +146,13 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
router.push({ url: 'xxx' }) router.push({ url: 'xxx' })
}) })
} }
ListItem() { ListItem() {
Button("Second").onClick(() => { Button("Second").onClick(() => {
router.push({ url: 'yyy' }) router.push({ url: 'yyy' })
}) })
} }
ListItem() { ListItem() {
Button("Third").onClick(() => { Button("Third").onClick(() => {
router.push({ url: 'zzz' }) router.push({ url: 'zzz' })
...@@ -170,7 +172,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -170,7 +172,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
- 用于表单的提交 - 用于表单的提交
在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。 在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。
``` ```
@Entry @Entry
@Component @Component
...@@ -184,5 +186,5 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -184,5 +186,5 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
} }
} }
``` ```
![zh-cn_image_0000001190466492](figures/zh-cn_image_0000001190466492.png) ![zh-cn_image_0000001190466492](figures/zh-cn_image_0000001190466492.png)
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ d924661f
...@@ -8,7 +8,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -8,7 +8,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
接口的调用形式如下： 接口的调用形式如下：
Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) `Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
通过参数direction定义弹性布局的布局方向，justifyContent定义弹性布局方向上的子组件对齐方式， alignContent定义与布局方向垂直的方向上的子组件对齐方式，wrap定义内容超过一行时是否换行。 通过参数direction定义弹性布局的布局方向，justifyContent定义弹性布局方向上的子组件对齐方式， alignContent定义与布局方向垂直的方向上的子组件对齐方式，wrap定义内容超过一行时是否换行。
## 弹性布局方向 ## 弹性布局方向
...@@ -16,7 +16,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -16,7 +16,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
弹性布局有两个方向，子组件放置的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有： 弹性布局有两个方向，子组件放置的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
- FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。 - FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
``` ```
Flex({ direction: FlexDirection.Row }) { Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
...@@ -32,7 +32,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -32,7 +32,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png) ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png)
- FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。 - FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。
``` ```
Flex({ direction: FlexDirection.RowReverse }) { Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
...@@ -48,7 +48,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -48,7 +48,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png) ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png)
- FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。 - FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
``` ```
Flex({ direction: FlexDirection.Column }) { Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
...@@ -64,7 +64,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -64,7 +64,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png) ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png)
- FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。 - FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。
``` ```
Flex({ direction: FlexDirection.ColumnReverse }) { Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
...@@ -85,7 +85,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -85,7 +85,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有： 默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有：
- FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。 - FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
``` ```
Flex({ wrap: FlexWrap.NoWrap }) { Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
...@@ -100,7 +100,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -100,7 +100,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png) ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png)
- FlexWrap.Wrap：换行。 - FlexWrap.Wrap：换行。
``` ```
Flex({ wrap: FlexWrap.Wrap }) { Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
...@@ -115,7 +115,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -115,7 +115,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png) ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png)
- FlexWrap.WrapReverse：换行，且与行排列方向相反。 - FlexWrap.WrapReverse：换行，且与行排列方向相反。
``` ```
Flex({ wrap: FlexWrap.WrapReverse}) { Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
...@@ -138,7 +138,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -138,7 +138,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
可以通过justifyContent参数设置在主轴的对齐方式，可选值有： 可以通过justifyContent参数设置在主轴的对齐方式，可选值有：
- FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 - FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
``` ```
Flex({ justifyContent: FlexAlign.Start }) { Flex({ justifyContent: FlexAlign.Start }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -153,7 +153,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -153,7 +153,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218259634](figures/zh-cn_image_0000001218259634.png) ![zh-cn_image_0000001218259634](figures/zh-cn_image_0000001218259634.png)
- FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 - FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
``` ```
Flex({ justifyContent: FlexAlign.Center }) { Flex({ justifyContent: FlexAlign.Center }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -168,7 +168,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -168,7 +168,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218579608](figures/zh-cn_image_0000001218579608.png) ![zh-cn_image_0000001218579608](figures/zh-cn_image_0000001218579608.png)
- FlexAlign.End: 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。 - FlexAlign.End: 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
``` ```
Flex({ justifyContent: FlexAlign.End }) { Flex({ justifyContent: FlexAlign.End }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -183,7 +183,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -183,7 +183,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218739568](figures/zh-cn_image_0000001218739568.png) ![zh-cn_image_0000001218739568](figures/zh-cn_image_0000001218739568.png)
- FlexAlign. SpaceBetween: ，Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 - FlexAlign. SpaceBetween: ，Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
``` ```
Flex({ justifyContent: FlexAlign.SpaceBetween }) { Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -198,7 +198,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -198,7 +198,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001263019461](figures/zh-cn_image_0000001263019461.png) ![zh-cn_image_0000001263019461](figures/zh-cn_image_0000001263019461.png)
- FlexAlign. SpaceAround: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 - FlexAlign. SpaceAround: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
``` ```
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -213,7 +213,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -213,7 +213,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001263339461](figures/zh-cn_image_0000001263339461.png) ![zh-cn_image_0000001263339461](figures/zh-cn_image_0000001263339461.png)
- FlexAlign. SpaceEvenly: Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 - FlexAlign. SpaceEvenly: Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
``` ```
Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -233,7 +233,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -233,7 +233,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
可以通过alignItems参数设置在交叉轴的对齐方式，可选值有： 可以通过alignItems参数设置在交叉轴的对齐方式，可选值有：
- ItemAlign.Auto: 使用Flex容器中默认配置。 - ItemAlign.Auto: 使用Flex容器中默认配置。
``` ```
Flex({ alignItems: ItemAlign.Auto }) { Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -248,7 +248,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -248,7 +248,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218419616](figures/zh-cn_image_0000001218419616.png) ![zh-cn_image_0000001218419616](figures/zh-cn_image_0000001218419616.png)
- ItemAlign.Start: 交叉轴方向首部对齐。 - ItemAlign.Start: 交叉轴方向首部对齐。
``` ```
Flex({ alignItems: ItemAlign.Start }) { Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -263,7 +263,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -263,7 +263,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001263259401](figures/zh-cn_image_0000001263259401.png) ![zh-cn_image_0000001263259401](figures/zh-cn_image_0000001263259401.png)
- ItemAlign.Center: 交叉轴方向居中对齐。 - ItemAlign.Center: 交叉轴方向居中对齐。
``` ```
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -278,7 +278,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -278,7 +278,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218259636](figures/zh-cn_image_0000001218259636.png) ![zh-cn_image_0000001218259636](figures/zh-cn_image_0000001218259636.png)
- ItemAlign.End：交叉轴方向底部对齐。 - ItemAlign.End：交叉轴方向底部对齐。
``` ```
Flex({ alignItems: ItemAlign.End }) { Flex({ alignItems: ItemAlign.End }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -293,7 +293,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -293,7 +293,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218579610](figures/zh-cn_image_0000001218579610.png) ![zh-cn_image_0000001218579610](figures/zh-cn_image_0000001218579610.png)
- ItemAlign. Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 - ItemAlign. Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
``` ```
Flex({ alignItems: ItemAlign.Stretch }) { Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -308,7 +308,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -308,7 +308,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
![zh-cn_image_0000001218739570](figures/zh-cn_image_0000001218739570.png) ![zh-cn_image_0000001218739570](figures/zh-cn_image_0000001218739570.png)
- ItemAlign.Baseline：交叉轴方向文本基线对齐。 - ItemAlign.Baseline：交叉轴方向文本基线对齐。
``` ```
Flex({ alignItems: ItemAlign.Baseline }) { Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
......
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ d924661f
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。 2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。 3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
为实现栅格布局效果，声明式范式提供了GridContainer栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。 为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
## 栅格系统 ## 栅格系统
...@@ -32,15 +32,13 @@ ...@@ -32,15 +32,13 @@
系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下： 系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下：
<a id="grid_system_define">系统栅格定义</a>
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin | | ----------------------- | ------ | --------- | ------- | ------ | ------ |
| -------- | -------- | -------- | -------- | -------- | -------- | | 0&lt;水平宽度&lt;320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
| 0&lt;水平宽度&lt;320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp | | 320vp&lt;=水平宽度&lt;600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
| 320vp&lt;=水平宽度&lt;600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp | | 600vp&lt;=水平宽度&lt;840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
| 600vp&lt;=水平宽度&lt;840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp | | 840&lt;=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
| 840&lt;=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
## 如何使用 ## 如何使用
...@@ -48,37 +46,40 @@ ...@@ -48,37 +46,40 @@
### 创建栅格容器 ### 创建栅格容器
通过接口：GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。 通过接口`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp： - 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
```
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
```
栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
``` ```
GridContainer() {} GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
``` ```
上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
```
GridContainer() {}
```
也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如： 上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
``` - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
GridContainer({ sizeType: SizeType.SM) {
Row() { ```
Text('1') GridContainer({ sizeType: SizeType.SM) {
.useSizeType({ Row() {
xs: { span: 2},
sm: { span: 3, offset: 1 }, Text('1')
md: { span: 6, offset: 2 }, .useSizeType({
lg: { span: 8, offset: 2 }, xs: { span: 2},
}) sm: { span: 3, offset: 1 },
} md: { span: 6, offset: 2 },
} lg: { span: 8, offset: 2 },
``` })
上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。 }
}
```
上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
### 栅格容器内子组件的栅格设置 ### 栅格容器内子组件的栅格设置
...@@ -97,7 +98,7 @@ GridContainer() { ...@@ -97,7 +98,7 @@ GridContainer() {
} }
} }
``` ```
其中sm: { span: 2, offset: 0 } 指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。 其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
## 场景示例 ## 场景示例
使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。 使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ d924661f
...@@ -38,16 +38,20 @@ listener.on('change', onPortrait) ...@@ -38,16 +38,20 @@ listener.on('change', onPortrait)
[media-type] [and|not|only] [(media-feature)] [media-type] [and|not|only] [(media-feature)]
``` ```
例如： 例如：
screen and (round-screen: true) // 当设备屏幕是圆形时条件成立 screen and (round-screen: true) // 当设备屏幕是圆形时条件成立
(max-height: 800) // 当高度小于800时条件成立 (max-height: 800) // 当高度小于800时条件成立
(height &lt;= 800) // 当高度小于800时条件成立 (height &lt;= 800) // 当高度小于800时条件成立
screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征的多条件复杂语句查询 screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征的多条件复杂语句查询
### 媒体类型(media-type) ### 媒体类型(media-type)
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | -------------- |
| screen | 按屏幕相关参数进行媒体查询。 | | screen | 按屏幕相关参数进行媒体查询。 |
### 媒体逻辑操作(and|not|only) ### 媒体逻辑操作(and|not|only)
...@@ -56,48 +60,48 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征 ...@@ -56,48 +60,48 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征
**表1** 媒体逻辑操作符 **表1** 媒体逻辑操作符
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | ---------------------------------------- |
| and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | | and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用not运算符时必须指定媒体类型。 | | not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用not运算符时必须指定媒体类型。 |
| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用only时必须指定媒体类型。 | | only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用only时必须指定媒体类型。 |
| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | | ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | | or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了&lt;=，&gt;=，&lt;，&gt;操作符。 在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了&lt;=，&gt;=，&lt;，&gt;操作符。
**表2** 媒体逻辑范围操作符 **表2** 媒体逻辑范围操作符
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----- | ---------------------------------------- |
| &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)。 | | &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)。 |
| &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)。 | | &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)。 |
| &lt; | 小于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)。 | | &lt; | 小于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)。 |
| &gt; | 大于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)。 | | &gt; | 大于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)。 |
### 媒体特征(media-feature) ### 媒体特征(media-feature)
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ----------------- | ---------------------------------------- |
| height | 应用页面显示区域的高度。 | | height | 应用页面显示区域的高度。 |
| min-height | 应用页面显示区域的最小高度。 | | min-height | 应用页面显示区域的最小高度。 |
| max-height | 应用页面显示区域的最大高度。 | | max-height | 应用页面显示区域的最大高度。 |
| width | 应用页面显示区域的宽度。 | | width | 应用页面显示区域的宽度。 |
| min-width | 应用页面显示区域的最小宽度。 | | min-width | 应用页面显示区域的最小宽度。 |
| max-width | 应用页面显示区域的最大宽度。 | | max-width | 应用页面显示区域的最大宽度。 |
| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：<br/>-&nbsp;dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；<br/>-&nbsp;dpcm表示每厘米上的物理像素个数，1dpcm&nbsp;≈&nbsp;2.54dpi；<br/>-&nbsp;dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx&nbsp;=&nbsp;96dpi。 | | resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：<br/>-&nbsp;dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；<br/>-&nbsp;dpcm表示每厘米上的物理像素个数，1dpcm&nbsp;≈&nbsp;2.54dpi；<br/>-&nbsp;dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx&nbsp;=&nbsp;96dpi。 |
| min-resolution | 设备的最小分辨率。 | | min-resolution | 设备的最小分辨率。 |
| max-resolution | 设备的最大分辨率。 | | max-resolution | 设备的最大分辨率。 |
| orientation | 屏幕的方向。<br/>可选值：<br/>-&nbsp;orientation:&nbsp;portrait（设备竖屏）<br/>-&nbsp;orientation:&nbsp;landscape（设备横屏） | | orientation | 屏幕的方向。<br/>可选值：<br/>-&nbsp;orientation:&nbsp;portrait（设备竖屏）<br/>-&nbsp;orientation:&nbsp;landscape（设备横屏） |
| device-height | 设备的高度。 | | device-height | 设备的高度。 |
| min-device-height | 设备的最小高度。 | | min-device-height | 设备的最小高度。 |
| max-device-height | 设备的最大高度。 | | max-device-height | 设备的最大高度。 |
| device-width | 设备的宽度。 | | device-width | 设备的宽度。 |
| min-device-width | 设备的最小宽度。 | | min-device-width | 设备的最小宽度。 |
| max-device-width | 设备的最大宽度。 | | max-device-width | 设备的最大宽度。 |
| round-screen | 屏幕类型，圆形屏幕为true，&nbsp;非圆形屏幕为&nbsp;false。 | | round-screen | 屏幕类型，圆形屏幕为true，&nbsp;非圆形屏幕为&nbsp;false。 |
| dark-mode | 系统为深色模式时为true，否则为false。 | | dark-mode | 系统为深色模式时为true，否则为false。 |
## 场景示例 ## 场景示例
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或