diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001219982725.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001219982725.png new file mode 100644 index 0000000000000000000000000000000000000000..b980148e07e0d6d9f42b0df75766da9cbfe09840 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001219982725.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png index 8e1eb1e09de7fe545f80f7a0601f63843369375a..048fdc4749a41e0675390e66e61b5d63953ed8e1 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png differ 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 528a1e9c5cd23a373897f747fe4e6496ccae7938..965f8428d3bee2aa6c2a17d0b273abf830a2ebae 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 @@ -36,14 +36,14 @@ Circle(options?: {width?: string | number, height?: string | number}) | -------- | -------- | -------- | -------- | -------- | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | 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 | 否 | 设置线条拐角绘制样式。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 | +| 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 | 否 | 设置线条宽度。 | +| 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 e4f4a98f6b16c09f55cc4a8122c1ed37d60c9b18..56b90bf489c99064fadb06c8d0f0e6321d6920b6 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 @@ -37,14 +37,14 @@ ellipse(options?: {width?: string | number, height?: string | number}) | -------- | -------- | -------- | -------- | -------- | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | 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 | 否 | 设置线条拐角绘制样式。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 |设置边框颜色，不设置时，默认没有边框。 | +| 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 | 否 | 设置线条宽度。 | +| 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 9c95e30148689074566d2753d95ac4f17b31b527..db34c973330b229bf153399f14343550bed4247b 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 @@ -48,9 +48,10 @@ Line(options?: {width?: string | number, height?: string | number}) | strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | - ## 示例 +### 示例1 + ```ts // xxx.ets @Entry @@ -77,7 +78,15 @@ struct LineExample { .startPoint([0, 0]) .endPoint([100, 100]) .strokeWidth(3) - .strokeDashArray([1, 3]) + .strokeDashArray([10, 3]) + .backgroundColor('#F5F5F5') + // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移 + Line({ width: 50, height: 50 }) + .startPoint([0, 0]) + .endPoint([100, 100]) + .strokeWidth(3) + .strokeDashArray([10, 3]) + .strokeDashOffset(5) .backgroundColor('#F5F5F5') } } @@ -85,3 +94,46 @@ struct LineExample { ``` ![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.png) + +### 示例2 + +```ts +// xxx.ets +@Entry +@Component +struct LineExample1 { + build() { + Row({ space: 10 }) { + // 当LineCapStyle值为Butt时 + Line() + .width(100) + .height(200) + .startPoint([50, 50]) + .endPoint([50, 200]) + .strokeWidth(20) + .strokeLineCap(LineCapStyle.Butt) + .backgroundColor('#F5F5F5').margin(10) + // 当LineCapStyle值为Round时 + Line() + .width(100) + .height(200) + .startPoint([50, 50]) + .endPoint([50, 200]) + .strokeWidth(20) + .strokeLineCap(LineCapStyle.Round) + .backgroundColor('#F5F5F5') + // 当LineCapStyle值为Square时 + Line() + .width(100) + .height(200) + .startPoint([50, 50]) + .endPoint([50, 200]) + .strokeWidth(20) + .strokeLineCap(LineCapStyle.Square) + .backgroundColor('#F5F5F5') + } + } +} +``` + +![zh-cn_image1_0000001219982725](figures/zh-cn_image1_0000001219982725.png) 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 e68971388ea5068f906f68fb3a60a1846e69ed82..ab5fc7f60781604ec3507079aaee86ae2bad8b47 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 @@ -35,7 +35,7 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str | commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 | | strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | 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 949c9173d9901dbd85d3e8525949bc084e97d5ef..4bd7415fb552ecdff72011f2f23c5a7a057f8b1b 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 @@ -37,14 +37,14 @@ Polygon(options?: {width?: string | number, height?: string | number}) | points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | 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 | 否 | 设置线条拐角绘制样式。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | +| 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 | 否 | 设置线条宽度。 | +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | +| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | ## Point 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 08178a33fd35a544af9044698c035925694b2fae..f30e88962c288d32832d3698edf3a2707c2c281d 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 @@ -38,7 +38,7 @@ Polyline(options?: {width?: string | number, height?: string | number}) | points | Array<Point> | [] | 否 | 折线经过坐标点列表。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 | | strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | 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 bdac39b9f40fdcc41573fc0274b848816b9682b8..7df16792ea3737414696c9a370cdc523d457d0db 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 @@ -44,14 +44,14 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string | radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | 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 | 否 | 设置线条拐角绘制样式。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | +| 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 | 否 | 设置线条宽度。 | +| 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 56daced9b08fafc401b9c2af9beaceca213debff..e225f69e968dcfa62d262b2a5a17f114ec1c564f 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 @@ -40,14 +40,14 @@ Shape(value?: PixelMap) | viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | 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 | 否 | 设置线条拐角绘制样式。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | +| 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](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 | -| strokeWidth | number \| string | 1 | 否 | 设置线条宽度。 | +| strokeOpacity | number \| string \| [Resource](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。 |