!10541 添加绘制组件示例挑单到3.1release

Merge pull request !10541 from 田雨/OpenHarmony-3.1-Release

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

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

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)

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

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

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

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

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

@@ -40,14 +40,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#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
 | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
+| 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。 |