!16801 shape组件增加宽高

Merge pull request !16801 from lanyi/lanyidocs3

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

@@ -58,35 +58,41 @@ struct LineExample {
     Column({ space: 10 }) {
       // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标
       Line()
+        .width(200)
+        .height(150)
         .startPoint([0, 0])
         .endPoint([50, 100])
         .stroke(Color.Black)
         .backgroundColor('#F5F5F5')
       Line()
         .width(200)
-        .height(200)
+        .height(150)
         .startPoint([50, 50])
         .endPoint([150, 150])
         .strokeWidth(5)
         .stroke(Color.Orange)
         .strokeOpacity(0.5)
         .backgroundColor('#F5F5F5')
-      // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域
-      Line({ width: 50, height: 50 })
+      // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移
+      Line()
+        .width(200)
+        .height(150)
         .startPoint([0, 0])
         .endPoint([100, 100])
         .stroke(Color.Black)
         .strokeWidth(3)
         .strokeDashArray([10, 3])
+        .strokeDashOffset(5)
         .backgroundColor('#F5F5F5')
-      // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移
-      Line({ width: 50, height: 50 })
+      // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域
+      Line()
+        .width(50)
+        .height(50)
         .startPoint([0, 0])
         .endPoint([100, 100])
         .stroke(Color.Black)
         .strokeWidth(3)
         .strokeDashArray([10, 3])
-        .strokeDashOffset(5)
         .backgroundColor('#F5F5F5')
     }
   }
@@ -151,12 +157,16 @@ struct LineExample {
   build() {
     Column() {
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 30])
         .endPoint([300, 30])
         .stroke(Color.Black)
         .strokeWidth(10)
       // 设置strokeDashArray的数组间隔为 50
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)
@@ -164,6 +174,8 @@ struct LineExample {
         .strokeDashArray([50])
       // 设置strokeDashArray的数组间隔为 50, 10
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)
@@ -171,6 +183,8 @@ struct LineExample {
         .strokeDashArray([50, 10])
       // 设置strokeDashArray的数组间隔为 50, 10, 20
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)
@@ -178,6 +192,8 @@ struct LineExample {
         .strokeDashArray([50, 10, 20])
       // 设置strokeDashArray的数组间隔为 50, 10, 20, 30
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)

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

@@ -74,9 +74,10 @@ struct PathExample {
         .fontSize(11)
         .fontColor(0xCCCCCC)
         .width('90%')
-      // 绘制一条长900px，宽3vp的直线
+      // 绘制一条长600px，宽3vp的直线
       Path()
-        .height(10)
+        .width('600px')
+        .height('10px')
         .commands('M0 0 L600 0')
         .stroke(Color.Black)
         .strokeWidth(3)
@@ -88,16 +89,22 @@ struct PathExample {
       // 绘制直线图形
       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
         Path()
+          .width('210px')
+          .height('310px')
           .commands('M100 0 L200 240 L0 240 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
+          .width('210px')
+          .height('310px')
           .commands('M0 0 H200 V200 H0 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
+          .width('210px')
+          .height('310px')
           .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
@@ -108,16 +115,22 @@ struct PathExample {
       // 绘制弧线图形
       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
         Path()
+          .width('250px')
+          .height('310px')
           .commands("M0 300 S100 0 240 300 Z")
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
+          .width('210px')
+          .height('310px')
           .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
+          .width('210px')
+          .height('310px')
           .commands('M0 100 A30 20 20 0 0 200 100 Z')
           .fillOpacity(0)
           .stroke(Color.Black)

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

@@ -70,6 +70,8 @@ struct ShapeExample {
         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 })
       }
+      .width(350)
+      .height(140)
       .viewPort({ x: -2, y: -2, width: 304, height: 130 })
       .fill(0x317AF7)
       .stroke(Color.Black)
@@ -83,6 +85,8 @@ struct ShapeExample {
       Shape() {
         Rect().width(300).height(50)
       }
+      .width(350)
+      .height(80)
       .viewPort({ x: 0, y: 0, width: 320, height: 70 })
       .fill(0x317AF7)
       .stroke(Color.Black)
@@ -91,6 +95,8 @@ struct ShapeExample {
       Shape() {
         Rect().width(300).height(50)
       }
+      .width(350)
+      .height(80)
       .viewPort({ x: -5, y: -5, width: 320, height: 70 })
       .fill(0x317AF7)
       .stroke(Color.Black)
@@ -101,6 +107,8 @@ struct ShapeExample {
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
+      .width(350)
+      .height(20)
       .viewPort({ x: 0, y: -5, width: 300, height: 20 })
       .stroke(0xEE8443)
       .strokeWidth(10)
@@ -109,6 +117,8 @@ struct ShapeExample {
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
+      .width(350)
+      .height(20)
       .viewPort({ x: 0, y: -5, width: 300, height: 20 })
       .stroke(0xEE8443)
       .strokeWidth(10)
@@ -118,6 +128,8 @@ struct ShapeExample {
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
+      .width(350)
+      .height(20)
       .viewPort({ x: 0, y: -5, width: 300, height: 20 })
       .stroke(0xEE8443)
       .strokeWidth(10)
@@ -126,6 +138,8 @@ struct ShapeExample {
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
+      .width(350)
+      .height(20)
       .viewPort({ x: 0, y: -5, width: 300, height: 20 })
       .stroke(0xEE8443)
       .strokeWidth(10)
@@ -135,7 +149,9 @@ struct ShapeExample {
       Shape() {
         Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
       }
-      .viewPort({ x: -80, y: -5, width: 310, height: 90 })
+      .width(300)
+      .height(200)
+      .viewPort({ x: -20, y: -5, width: 310, height: 90 })
       .fill(0x317AF7)
       .stroke(0xEE8443)
       .strokeWidth(10)
@@ -147,3 +163,4 @@ struct ShapeExample {
 ```
 
 ![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png)
+、
\ No newline at end of file