diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index c9883c3e88261d2626e10e20a8f6f44f066d664c..6a9f1a8f1ee8e78ea521df05e11b5f0b697b4372 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -19,21 +19,32 @@ ## 接口 -Circle(value?: {width: string | number, height: string | number}) +Circle(options?: {width?: string | number, height?: string | number}) -**参数：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------------------------- | ---- | ------ | -------- | -| width | string \| number | 是 | - | 宽度。 | -| height | string \| number | 是 | - | 高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | ------ | ---- | ------------------ | -| width | Length | 0 | 否 | 圆所在矩形的宽度。 | -| height | Length | 0 | 否 | 圆所在矩形的高度。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 8bd5b9e6a42a870e5685abb223235498460b73d4..fc57ec26d00126bf70d81ef531589a5dabcb43f5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -20,21 +20,32 @@ ## 接口 -Ellipse(value?: {width: string | number, height: string | number}) +ellipse(options?: {width?: string | number, height?: string | number}) -**参数：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------------------------- | ---- | ------ | -------- | -| width | string \| number | 是 | - | 宽度。 | -| height | string \| number | 是 | - | 高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | ------ | ---- | -------------------- | -| width | Length | 0 | 否 | 椭圆所在矩形的宽度。 | -| height | Length | 0 | 否 | 椭圆所在矩形的高度。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 |设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index 54f78ab10a643a4773e19ee14ad645750a93ce0b..cc7e767ef5e05905bcbccc945dd6a8b267dc637e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -19,23 +19,34 @@ ## 接口 -Line(value?: {width: string | number, height: string | number}) +Line(options?: {width?: string | number, height?: string | number}) -**参数：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------------------------- | ---- | ------ | -------- | -| width | string \| number | 是 | - | 宽度。 | -| height | string \| number | 是 | - | 高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| ---------- | ------------- | ----------- | ---- | ------------------------ | -| width | [Length](ts-types.md#length) | 0 | 否 | 直线所在矩形的宽度。 | -| height | [Length](ts-types.md#length) | 0 | 否 | 直线所在矩形的高度。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | | startPoint | Array | [0, 0] | 是 | 直线起点坐标点(相对坐标)。 | | endPoint | Array | [0, 0] | 是 | 直线终点坐标点(相对坐标)。 | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index 1846c4a63257deb3cd99566af1baf231b2b43e2e..9ad93694d6b5feb317d6d014e733e51344eb5737 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -14,50 +14,54 @@ ## 接口 -Path(value?: { width?: number | string, height?: number | string, commands?: string }) +Path(value?: { width?: number | string; height?: number | string; commands?: string }) -**参数：** +- 参数 -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | ---------------- | ---- | ---- | ----------- | -| width | number \| string | 否 | 0 | 路径所在矩形的宽度。 | -| height | number \| string | 否 | 0 | 路径所在矩形的高度。 | -| commands | string | 否 | '' | 路径绘制的命令字符串。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | ---- | ------ | -------------------- | + | width | number \| string | 否 | 0 | 路径所在矩形的宽度 | + | height | number \| string | 否 | 0 | 路径所在矩形的高度 | + | commands | string | 否 | '' | 路径绘制的命令字符串 | -## 属性 - -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | --------------------------------------- | ------ | ---- | ------------------------ | -| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 | -| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 | -| commands | string | '' | 否 | 路径绘制的命令字符串。 | - - -支持的绘制命令如下： - - -- M = moveto - -- L = lineto - -- H = horizontal lineto - -- V = vertical lineto - -- C = curveto - -- S = smooth curveto - -- Q = quadratic Belzier curve - -- T = smooth quadratic Belzier curveto - -- A = elliptical Arc - -- Z = closepath + +## 属性 -如 commands('M0 20 L50 50 L50 100 Z')定义了一条路径，开始于位置（0，20），到达位置（50，50）后再到（50，100），最后在（0，20）处关闭路径。 +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- | +| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | + + +commands支持的绘制命令如下： + +| 命令 | 名称 | 参数 | 说明 | +| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- | +| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 | +| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 | +| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 | +| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 | +| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 | +| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 | +| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 | +| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 | +| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 | +| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 | + +例如： commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。 ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index ed3a3a4d402b5e6d2246a02b8c7b23c5954c94b1..31188de70e296d8251ec0ce82b98789b492f0ddf 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -19,22 +19,41 @@ ## 接口 -Polygon(value?:{width?: string | number, height?: string | number}) +Polygon(options?: {width?: string | number, height?: string | number}) -**参数：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------------------------- | ---- | ------ | -------- | -| width | string \| number | 是 | - | 宽度。 | -| height | string \| number | 是 | - | 高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | ---------------- | ------ | ---- | ---------------------- | -| width | Length | 0 | 否 | 多边形所在矩形的宽度。 | -| height | Length | 0 | 否 | 多边形所在矩形的高度。 | -| points | Array<any> | - | 是 | 多边形的顶点坐标列表。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | + +## Point + +点坐标类型。 + +| 名称 | 类型定义 | 描述 | +| --------- | -------------------- | ------------------------------------------------------------ | +| Point | [number, number] | 第一个参数为x轴坐标，第二个参数为y轴坐标（相对坐标）。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index cd7e78f61fca6fc2bf15433cfbd2c34e4c9894bd..6d754199f6e8fe2025d4d806519b89c3638ca0e6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -20,22 +20,41 @@ ## 接口 -Polyline(value?: {width?: string | number, height?: string | number}) +Polyline(options?: {width?: string | number, height?: string | number}) -**参数：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------------------------- | ---- | ------ | -------- | -| width | string \| number | 是 | - | 宽度。 | -| height | string \| number | 是 | - | 高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | ---------------- | ------ | ---- | -------------------- | -| width | Length | 0 | 否 | 折线所在矩形的宽度。 | -| height | Length | 0 | 否 | 折线所在矩形的高度。 | -| points | Array<any> | - | 是 | 折线经过坐标点列表。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | 否 | 折线经过坐标点列表。 | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | + +## Point + +点坐标类型。 + +| 名称 | 类型定义 | 描述 | +| --------- | -------------------- | ------------------------------------------------------------ | +| Point | [number, number] | 第一个参数为x轴坐标，第二个参数为y轴坐标（相对坐标）。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index ab63e2c22bac7962b5ff03a45405d15bcd1b157a..a0668570471f2d1c3bd9651bfaa6abef790411b6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -20,27 +20,39 @@ ## 接口 -Rect(value:{value?: {width?: number | string ,height?: number | string ,radius?: number | string | Array<Length>} | {width?: number | string ,height?: number | string ,radiusWidth?: number | string ,radiusHeight?: number | string }}) +Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | + {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) -**options参数说明：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | + | radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | + | radiusWidth | string \| number | 否 | 0 | 圆角宽度。 | + | radiusHeight | string \| number | 否 | 0 | 圆角高度。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------------ | ----------------------------------------------------------- | ---- | ------ | ---------------------------------------- | -| width | number \| string | 是 | - | 宽度。 | -| height | number \| string | 是 | - | 高度。 | -| radius | number \| string \| Array<any> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | -| radiusWidth | number \| string | 否 | 0 | 圆角宽度。 | -| radiusHeight | number \| string | 否 | 0 | 圆角高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| ------------ | ------------------------------------ | ------ | ---- | -------------------------------- | -| width | Length | 0 | 否 | 宽度。 | -| height | Length | 0 | 否 | 高度。 | -| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | -| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | -| radius | Length \| Array<any> | 0 | 否 | 圆角大小。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | +| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | +| radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index b00ca3fa6b198dbafc1a1152e163b9f03310f91a..70472c53c508d202710a7211d9da7aa2b5b5b409 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -23,31 +23,33 @@ ## 接口 -Shape(value?: {target?: PixelMap}) +Shape(value?: PixelMap) -**参数：** +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | PixelMap | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------- | ---- | ------ | ------------------------------------------------------------ | -| target | PixelMap | 否 | null | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| ---------------- | ------------------------------------------------------------ | ------------------- | ---- | -------------------------- | -| viewPort | {
x?: [Length](ts-types.md#length),
y?:  [Length](ts-types.md#length),
width?:  [Length](ts-types.md#length),
height?:  [Length](ts-types.md#length)
} | - | 是 | 形状的视口。 | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Black | 否 | 填充颜色。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 边框颜色。 | -| strokeDashArray | Array<any> | [] | 否 | 设置边框的间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 路径端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 边框拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 否 | 设置边框的不透明度。 | -| strokeWidth | number \| string | 1 | 否 | 设置边框的宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿。 | -| mesh | Array<any>,
column:number,
row:number | - | 否 | 绘制网格时调用。 | -| fillOpacity | number \| string \|  [Resource](ts-types.md#resource) | 1 | 否 | 设置形状填充部分的透明度。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | +| strokeWidth | number \| string | 1 | 否 | 设置线条宽度。 | +| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| mesh8+ | Array<number>,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 | ## 示例