!10515 绘制组件示例图挑单到3.2beta3

Merge pull request !10515 from 田雨/cherry-pick-1665542962

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) | 否 | 设置填充区域颜色。<br>默认值：Color.Black |
 | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 否 | 设置填充区域透明度。<br>默认值：1 |
-| stroke | [ResourceColor](ts-types.md) | 否 | 设置线条颜色。<br>默认值：Color.Black |
-| strokeDashArray | Array&lt;Length&gt; | 否 | 设置线条间隙。<br>默认值：[] |
-| strokeDashOffset | number&nbsp;\|&nbsp;string  | 否 | 线条绘制起点的偏移量。<br>默认值：0 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 否 | 设置线条端点绘制样式。<br>默认值：LineCapStyle.Butt  |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 否 | 设置线条拐角绘制样式。<br>默认值：LineJoinStyle.Miter |
+| stroke | [ResourceColor](ts-types.md) | 否 | 设置边框颜色，不设置时，默认没有边框。 |
+| strokeDashArray | Array&lt;Length&gt; | 否 | 设置边框间隙。<br>默认值：[] |
+| strokeDashOffset | number&nbsp;\|&nbsp;string  | 否 | 边框绘制起点的偏移量。<br>默认值：0 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 否 | 设置边框端点绘制样式。<br>默认值：LineCapStyle.Butt |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 否 | 设置边框拐角绘制样式。<br>默认值：LineJoinStyle.Miter |
 | strokeMiterLimit | number&nbsp;\|&nbsp;string | 否 | 设置锐角绘制成斜角的极限值。<br>默认值：4 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 否 | 设置线条透明度。<br>默认值：1 |
-| strokeWidth | Length | 否 | 设置线条宽度。<br>默认值：1 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 否 | 设置边框透明度。<br>默认值：1 |
+| strokeWidth | Length | 否 | 设置边框宽度。<br>默认值：1 |
 | antiAlias | boolean | 否 | 是否开启抗锯齿效果。<br>默认值：true |
 
 

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 | 否 | 是否开启抗锯齿效果。 |
 
 

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 {
 ```
 
 ![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)
\ No newline at end of file

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 | 否 | 设置线条端点绘制样式。 |

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

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 | 否 | 设置线条端点绘制样式。 |

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md

@@ -39,14 +39,14 @@ Rect(value?: {width?: string | number,height?: string | number,radius?: string |
 | 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 | 否 | 是否开启抗锯齿效果。 |
 
 

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 | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
 | fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
 | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;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&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
 | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
-| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置线条宽度。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 |
+| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置边框宽度。 |
 | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
 | mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 |