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 4da279cc7c27cfb55c8f441f0d5906496351d128..1d790cb18e416d3369d63c4d07e7513972c67a81 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
@@ -30,14 +30,14 @@ Circle(options?: {width?: string | number, height?: string | number})
| -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | 否 | 设置填充区域颜色。
默认值：Color.Black |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 否 | 设置填充区域透明度。
默认值：1 |
-| stroke | [ResourceColor](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 |
+| stroke | [ResourceColor](ts-types.md) | 否 | 设置边框颜色，不设置时，默认没有边框。 |
+| 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 | Length | 否 | 设置线条宽度。
默认值：1 |
+| strokeOpacity | number \| string \| [Resource](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 6825c18b27042263f7d1f3d585e51df7cc104c0c..bedfc7713757b2291914cab626aa27af1501923f 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
@@ -31,14 +31,14 @@ ellipse(options?: {width?: string | number, height?: string | number})
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](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 | 否 | 设置线条拐角绘制样式。 |
+| stroke | [ResourceColor](ts-types.md) | - | 否 |设置边框颜色，不设置时，默认没有边框。 |
+| 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 | Length | 1 | 否 | 设置线条宽度。 |
+| strokeOpacity | number \| string \| [Resource](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 b9059c4c36e6fb7f1642633b3402fb3a5f7b178a..616f06a5994845272abc6f453590222744dabfa2 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
@@ -50,9 +50,10 @@ Line(value?: {width?: string | number, height?: string | number})
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
-
## 示例
+### 示例1
+
```ts
// xxx.ets
@Entry
@@ -79,7 +80,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')
}
}
@@ -87,3 +96,46 @@ struct LineExample {
```
+
+### 示例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')
+ }
+ }
+}
+```
+
+
\ No newline at end of file
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 5929aa6c23a2eab7ad9b5cf08584b635cebf41cc..ecdc9f2e09cbab6f5e1ac00ad5b47ef61edc28e0 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
@@ -32,7 +32,7 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
+| stroke | [ResourceColor](ts-types.md) | - | 否 | 设置线条颜色。 |
| 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 cb1f6803ae97b70c086b64d4fba4498a9ebaf576..eefd1d43c4fc7e487001ed1c1945591f5a38f0fc 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
@@ -33,14 +33,14 @@ Polygon(value?: {width?: string | number, height?: string | number})
| points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](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 | 否 | 设置线条拐角绘制样式。 |
+| stroke | [ResourceColor](ts-types.md) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
+| 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 | Length | 1 | 否 | 设置线条宽度。 |
+| strokeOpacity | number \| string \| [Resource](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 dd862ca6184c0d4684a4f3c0677380ec79e8b4f9..8042a9947528a5f0e70761fb56a9df721a8a688c 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
@@ -33,7 +33,7 @@ Polyline(value?: {width?: string | number, height?: string | number})
| points | Array<Point> | [] | 否 | 折线经过坐标点列表。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
+| stroke | [ResourceColor](ts-types.md) | - | 否 | 设置线条颜色。 |
| 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 a7582c53b2ea630fda8cde04b89174273ccab123..d2549d5bb3d22419b36aae65fc144f9bd56fb3fb 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
@@ -19,34 +19,34 @@ Rect(value?: {width?: string | number,height?: string | number,radius?: string |
**参数：**
-| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
-| width | string \| number | 否 | 0 | 宽度。 |
-| height | string \| number | 否 | 0 | 高度。 |
-| radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
-| radiusWidth | string \| number | 否 | 0 | 圆角宽度。 |
-| radiusHeight | string \| number | 否 | 0 | 圆角高度。 |
+| width | string \| number | 否 | 0 | 宽度。 |
+| height | string \| number | 否 | 0 | 高度。 |
+| radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
+| radiusWidth | string \| number | 否 | 0 | 圆角宽度。 |
+| radiusHeight | string \| number | 否 | 0 | 圆角高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
-| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 |
-| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 |
+| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 |
+| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 |
| radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](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 | 否 | 设置线条拐角绘制样式。 |
+| stroke | [ResourceColor](ts-types.md) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 |
+| 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 | Length | 1 | 否 | 设置线条宽度。 |
+| strokeOpacity | number \| string \| [Resource](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 ac8e3eb10f828f85a6fd8fdfa364fee75a9ca1a2..709e897f90d1940b5388b18c148592a0e1f74361 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
@@ -14,7 +14,7 @@
## 子组件
-可以包含子组件。
+包含[Rect](ts-drawing-components-rect.md)、[Path](ts-drawing-components-path.md)、[Circle](ts-drawing-components-circle.md)、[Ellipse](ts-drawing-components-ellipse.md)、[Polyline](ts-drawing-components-polyline.md)、[Polygon](ts-drawing-components-polygon.md)、[Image](ts-basic-components-image.md)、[Text](ts-basic-components-text.md)、[Column](ts-container-column.md)、[Row](ts-container-row.md)子组件。
## 接口
@@ -37,14 +37,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) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](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 | 否 | 设置线条拐角绘制样式。 |
+| stroke | [ResourceColor](ts-types.md) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
+| 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。 |