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

Signed-off-by: Nluoying_ace <luoying19@huawei.com>

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

@@ -48,7 +48,7 @@ Shape(value?: PixelMap)
 | 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。 |
 
-## 示例
+## 示例1
 
 ```ts
 // xxx.ets
@@ -56,61 +56,169 @@ Shape(value?: PixelMap)
 @Component
 struct ShapeExample {
   build() {
-    Column({ space: 5 }) {
-      Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320)
-      // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启)
-      // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启)
-      // 在Shape的(-2, 118)点绘制一个 300 * 10 线段,颜色0x317Af7,边框颜色黑色,宽度4,间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启)
+    Column({ space: 10 }) {
+      Text('basic').fontSize(11).fontColor(0xCCCCCC).width(320)
+      // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启)
+      // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启)
+      // 在Shape的(-2, 118)点绘制一个 300 * 10 直线路径,颜色0x317AF7,边框颜色黑色,宽度4,间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启)
       Shape() {
         Rect().width(300).height(50)
         Ellipse().width(300).height(50).offset({ x: 0, y: 60 })
         Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 })
       }
       .viewPort({ x: -2, y: -2, width: 304, height: 130 })
-      .fill(0x317Af7).stroke(Color.Black).strokeWidth(4)
-      .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round)
-      .strokeLineJoin(LineJoinStyle.Round).antiAlias(true)
-      // 在Shape的(-1, -1)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度2
+      .fill(0x317AF7)
+      .stroke(Color.Black)
+      .strokeWidth(4)
+      .strokeDashArray([20])
+      .strokeDashOffset(10)
+      .strokeLineCap(LineCapStyle.Round)
+      .strokeLineJoin(LineJoinStyle.Round)
+      .antiAlias(true)
+      // 分别在Shape的(0, 0)、(-5, -5)点绘制一个 300 * 50 带边框的矩形,可以看出之所以将视口的起始位置坐标设为负值是因为绘制的起点默认为线宽的中点位置，因此要让边框完全显示则需要让视口偏移半个线宽
       Shape() {
         Rect().width(300).height(50)
-      }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2)
+      }
+      .viewPort({ x: 0, y: 0, width: 320, height: 70 })
+      .fill(0x317AF7)
+      .stroke(Color.Black)
+      .strokeWidth(10)
 
-      Text('border').fontSize(30).fontColor(0xCCCCCC).width(320).margin({top:30})
-      // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20
       Shape() {
-        Path().width(300).height(10).commands('M0 0 L900 0')
-      }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20])
-      // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10
+        Rect().width(300).height(50)
+      }
+      .viewPort({ x: -5, y: -5, width: 320, height: 70 })
+      .fill(0x317AF7)
+      .stroke(Color.Black)
+      .strokeWidth(10)
+
+      Text('path').fontSize(11).fontColor(0xCCCCCC).width(320)
+      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
       .viewPort({ x: 0, y: -5, width: 300, height: 20 })
-      .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10)
-      // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,透明度0.5
+      .stroke(0xEE8443)
+      .strokeWidth(10)
+      .strokeDashArray([20])
+      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,向左偏移10
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
-      }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5)
-      // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10,尖端样式圆角
+      }
+      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
+      .stroke(0xEE8443)
+      .strokeWidth(10)
+      .strokeDashArray([20])
+      .strokeDashOffset(10)
+      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,透明度0.5
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
       .viewPort({ x: 0, y: -5, width: 300, height: 20 })
-      .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round)
-      // 在Shape的(-5, -5)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框宽度10,边框颜色0xEE8443,拐角样式圆角
+      .stroke(0xEE8443)
+      .strokeWidth(10)
+      .strokeOpacity(0.5)
+      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,线条两端样式为半圆
       Shape() {
-        Rect().width(300).height(100)
+        Path().width(300).height(10).commands('M0 0 L900 0')
       }
-      .viewPort({ x: -5, y: -5, width: 310, height: 120 })
-      .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round)
+      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
+      .stroke(0xEE8443)
+      .strokeWidth(10)
+      .strokeDashArray([20])
+      .strokeLineCap(LineCapStyle.Round)
+      // 在Shape的(-80, -5)点绘制一个封闭路径,颜色0x317AF7,线条宽度10,边框颜色0xEE8443,拐角样式锐角（默认值）
       Shape() {
-        Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z')
+        Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
       }
-      .viewPort({ x: -80, y: -5, width: 310, height: 100 })
-      .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10)
-      .strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5)
+      .viewPort({ x: -80, y: -5, width: 310, height: 90 })
+      .fill(0x317AF7)
+      .stroke(0xEE8443)
+      .strokeWidth(10)
+      .strokeLineJoin(LineJoinStyle.Miter)
+      .strokeMiterLimit(5)
     }.width('100%').margin({ top: 15 })
   }
 }
 ```
 
-![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png)
+
+## 示例2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ShapeMeshExample {
+  @State columnVal: number = 0;
+  @State rowVal: number = 0;
+  @State count: number = 0;
+  @State verts: Array<number> = [];
+  @State shapeWidth: number = 600;
+  @State shapeHeight: number = 600;
+
+  build() {
+    Column() {
+      Shape() {
+        Rect()
+          .width('250px')
+          .height('250px')
+          .radiusWidth('10px')
+          .radiusHeight('10px')
+          .stroke('10px')
+          .margin({ left: '10px', top: '10px' })
+          .strokeWidth('10px')
+          .fill(Color.Blue)
+        Rect()
+          .width('250px')
+          .height('250px')
+          .radiusWidth('10px')
+          .radiusHeight('10px')
+          .stroke('10px')
+          .margin({ left: '270px', top: '10px' })
+          .strokeWidth('10px')
+          .fill(Color.Red)
+      }
+      .mesh(this.verts, this.columnVal, this.rowVal)
+      .width(this.shapeWidth + 'px')
+      .height(this.shapeHeight + 'px')
+      // 手指触摸Shape组件时会显示mesh扭曲效果
+      .onTouch((event: TouchEvent) => {
+        var touchX = event.touches[0].x * 2;
+        var touchY = event.touches[0].y * 2;
+        this.columnVal = 20;
+        this.rowVal = 20;
+        this.count = (this.columnVal + 1) * (this.rowVal + 1);
+        var orig = [this.count * 2];
+        var index = 0;
+        for (var i = 0; i <= this.rowVal; i++) {
+          var fy = this.shapeWidth * i / this.rowVal;
+          for (var j = 0; j <= this.columnVal; j++) {
+            var fx = this.shapeWidth * j / this.columnVal;
+            orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx;
+            orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy;
+            index++;
+          }
+        }
+        for (var k = 0; k < this.count * 2; k += 2) {
+          var dx = touchX - orig[k + 0];
+          var dy = touchY - orig[k + 1];
+          var dd = dx * dx + dy * dy;
+          var d = Math.sqrt(dd);
+          var pull = 80000 / (dd * d);
+          if (pull >= 1) {
+            this.verts[k + 0] = touchX;
+            this.verts[k + 1] = touchY;
+          } else {
+            this.verts[k + 0] = orig[k + 0] + dx * pull;
+            this.verts[k + 1] = orig[k + 1] + dy * pull;
+          }
+        }
+      })
+    }
+    .width('600px')
+    .height('600px')
+    .border({ width: 3, color: Color.Black })
+  }
+}
+```