feat: 图形组件扩充形状

baidu · Dec 17, 2024 · 479aea7 · 479aea7
1 parent 812589f
commit 479aea7
Show file tree

Hide file tree

Showing 3 changed files with 412 additions and 143 deletions.
diff --git a/docs/zh-CN/components/shape.md b/docs/zh-CN/components/shape.md
@@ -120,100 +120,88 @@ icon:
 }
 ```
 
+## 自定义路径
+
+```schema
+{
+    type: "page",
+    body: [
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'custom',
+        color: "#037bff",
+        paths: [
+          "M 27.5,-0.5 C 29.5,-0.5 31.5,-0.5 33.5,-0.5C 36.7684,0.854923 37.1017,2.68826 34.5,5C 27.8333,9 21.1667,13 14.5,17C 16.0444,18.1871 17.7111,18.5205 19.5,18C 27.2036,13.8164 34.8703,9.64975 42.5,5.5C 48.8656,8.36388 54.8656,11.8639 60.5,16C 61.7112,16.8928 61.7112,17.7261 60.5,18.5C 50.6679,24.4991 40.5012,29.8324 30,34.5C 27.3736,34.4441 25.5403,33.2774 24.5,31C 31.4655,25.845 38.7989,21.1784 46.5,17C 45.3349,15.9164 44.0016,15.0831 42.5,14.5C 35.3291,18.9197 27.9958,23.0864 20.5,27C 18.8333,27.6667 17.1667,27.6667 15.5,27C 12.6907,25.2589 9.69069,24.0922 6.5,23.5C 6.33003,24.8221 6.66337,25.9887 7.5,27C 15.0829,31.3742 22.5829,35.8742 30,40.5C 40.1623,35.0865 50.1623,29.4198 60,23.5C 60.3333,23.8333 60.6667,24.1667 61,24.5C 61.6667,31.5 61.6667,38.5 61,45.5C 52.3566,51.5651 43.5232,57.2318 34.5,62.5C 31.8333,62.5 29.1667,62.5 26.5,62.5C 17.7048,56.5972 8.70483,50.9305 -0.5,45.5C -0.5,42.8333 -0.5,40.1667 -0.5,37.5C 9.82265,42.8149 20.156,48.1483 30.5,53.5C 37.9543,49.9391 45.2876,46.1058 52.5,42C 54.2446,40.308 54.5779,38.4747 53.5,36.5C 45.908,41.2139 38.0747,45.5472 30,49.5C 19.4253,44.0703 9.25867,38.0703 -0.5,31.5C -0.5,26.5 -0.5,21.5 -0.5,16.5C 8.85567,10.7985 18.189,5.13186 27.5,-0.5 Z",
+          "M 159.5,3.5 C 165.768,3.09235 167.768,5.75901 165.5,11.5C 158.228,12.9758 156.228,10.3091 159.5,3.5 Z",
+          "M 80.5,14.5 C 85.881,14.5735 90.881,15.9068 95.5,18.5C 98.816,26.6338 99.316,34.9671 97,43.5C 94.3893,47.6316 90.556,49.6316 85.5,49.5C 73.8113,48.9956 69.978,43.3289 74,32.5C 78.8546,28.8907 84.3546,27.224 90.5,27.5C 90.1774,23.8441 88.1774,21.8441 84.5,21.5C 80.7571,21.8577 77.4238,23.191 74.5,25.5C 73.359,23.5787 73.1923,21.5787 74,19.5C 75.9651,17.4497 78.1318,15.783 80.5,14.5 Z M 86.5,33.5 C 91.6306,33.606 92.7973,35.9394 90,40.5C 87.0622,42.8691 83.8956,43.0358 80.5,41C 79.4464,39.6124 79.2797,38.1124 80,36.5C 82.166,35.2685 84.3326,34.2685 86.5,33.5 Z",
+          "M 113.5,14.5 C 119.291,13.4888 124.124,15.1555 128,19.5C 133.652,15.2568 139.819,14.4235 146.5,17C 148.041,18.5793 149.208,20.4127 150,22.5C 150.832,31.1507 151.332,39.8174 151.5,48.5C 149.208,48.7564 147.041,48.4231 145,47.5C 143.781,40.5789 143.114,33.5789 143,26.5C 139.814,20.2831 136.147,19.9497 132,25.5C 131.5,33.1594 131.334,40.8261 131.5,48.5C 129.409,48.6816 127.409,48.3482 125.5,47.5C 124.337,40.2078 123.504,32.8745 123,25.5C 118.27,20.025 114.603,20.6917 112,27.5C 111.5,34.4921 111.334,41.4921 111.5,48.5C 108.921,48.9167 106.754,48.25 105,46.5C 104.333,39.1667 104.333,31.8333 105,24.5C 106.261,19.7452 109.095,16.4118 113.5,14.5 Z",
+          "M 199.5,35.5 C 199.5,37.5 199.5,39.5 199.5,41.5C 196.891,47.0648 192.391,49.7314 186,49.5C 179.379,49.3775 175.879,46.0442 175.5,39.5C 178.949,40.6386 182.449,41.6386 186,42.5C 188.97,42.7659 191.137,41.5992 192.5,39C 191.833,37.6667 190.833,36.6667 189.5,36C 185.218,34.7245 181.051,33.2245 177,31.5C 173.387,20.9296 177.221,15.263 188.5,14.5C 191.963,15.1536 195.13,16.487 198,18.5C 198.495,20.4727 198.662,22.4727 198.5,24.5C 195.496,23.2221 192.329,22.2221 189,21.5C 186.095,21.5591 183.928,22.7258 182.5,25C 186.479,27.5587 190.812,29.5587 195.5,31C 197.07,32.3968 198.404,33.8968 199.5,35.5 Z",
+          "M 158.5,15.5 C 161.044,15.1043 163.211,15.771 165,17.5C 165.112,25.5921 165.946,33.5921 167.5,41.5C 169.661,42.0351 171.661,42.8684 173.5,44C 169.982,50.6733 165.482,51.1733 160,45.5C 158.705,35.545 158.205,25.545 158.5,15.5 Z"
+        ]
+      }
+    ]
+}
+```
+
 ## 更多图形
 
 ```schema
 {
-  type: "page",
-  body: [
-    {
-      type: 'shape',
-      className: 'm-2',
-      shapeType: 'triangle',
-      width: 50,
-      height: 50
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      shapeType: 'square',
-      width: 50,
-      height: 50
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      shapeType: 'convex-arc-rectangle',
-      width: 50,
-      height: 50
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      shapeType: 'convex-arc-rectangle',
-      width: 50,
-      height: 50,
-      radius: 4
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      shapeType: 'concave-arc-rectangle',
-      width: 50,
-      height: 50,
-      radius: 4
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      shapeType: 'double-arc-rectangle',
-      width: 50,
-      height: 50,
-      radius: 4
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      width: 50,
-      height: 50,
-      shapeType: 'pentagon'
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      width: 50,
-      height: 50,
-      shapeType: 'hexagon'
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      width: 50,
-      height: 50,
-      shapeType: 'star'
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      width: 50,
-      height: 50,
-      shapeType: 'hexagon-star'
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      width: 50,
-      height: 50,
-      shapeType: 'heart'
-    },
-    {
-      type: 'shape',
-      className: 'm-2',
-      width: 50,
-      height: 50,
-      shapeType: 'circle'
-    }
-  ]
+  "type": "page",
+  "data": {
+    "rows": [
+      {"name": "正方形", "shapeType": "square"},
+      {"name": "等边三角形", "shapeType": "triangle"},
+      {"name": "直角三角形", "shapeType": "right-triangle"},
+      {"name": "矩形", "shapeType": "rectangle"},
+      {"name": "凸弧矩形", "shapeType": "convex-arc-rectangle", "radius": 3},
+      {"name": "凹弧矩形", "shapeType": "concave-arc-rectangle", "radius": 3},
+      {"name": "双凸弧矩形", "shapeType": "double-convex-arc-rectangle", "radius": 4},
+      {"name": "双凹弧矩形", "shapeType": "double-concave-arc-rectangle", "radius": 4},
+      {"name": "桶形矩形", "shapeType": "barrel-rectangle", "radius": 4},
+      {"name": "菱形", "shapeType": "rhombus"},
+      {"name": "平行四边形", "shapeType": "parallelogram"},
+      {"name": "矩形-类型1", "shapeType": "rectangle-1"},
+      {"name": "矩形-类型2", "shapeType": "rectangle-2"},
+      {"name": "矩形-类型3", "shapeType": "rectangle-3"},
+      {"name": "矩形-类型4", "shapeType": "rectangle-4"},
+      {"name": "心形", "shapeType": "heart"},
+      {"name": "正五边形", "shapeType": "pentagon"},
+      {"name": "正六边形", "shapeType": "hexagon"},
+      {"name": "正八边形", "shapeType": "octagon"},
+      {"name": "五角星", "shapeType": "star"},
+      {"name": "六角星", "shapeType": "hexagon-star"},
+      {"name": "圆", "shapeType": "circle"},
+      {"name": "箭头", "shapeType": "arrow"},
+    ]
+  },
+  "body": {
+    "type": "table",
+    "title": "表格",
+    "source": "${rows}",
+    "columns": [
+      {
+        "name": "name",
+        "label": "形状名称",
+        "width": 50
+      },
+       {
+        "name": "shapeType",
+        "label": "IShapeType",
+        "width": 50
+      },
+      {
+        "name": "shapeType",
+        "label": "形状",
+        "type": "shape",
+        "shapeType": "${shapeType}",
+        "radius": "${radius}",
+        "width": 50,
+        "height": 50
+      }
+    ]
+  }
 }
 ```
 
@@ -227,20 +215,3 @@ icon:
 | width     | `number`     | `200`     | 图形宽度            |
 | height    | `number`     | `200`     | 图形大小            |
 | radius    | `number`     | `0`       | 圆角大小（1-10）    |
-
-### IShapeType 类型
-
-| 类型                    | 说明     |
-| ----------------------- | -------- |
-| `square`                | 正方形   |
-| `triangle`              | 三角形   |
-| `rectangle`             | 矩形     |
-| `convex-arc-rectangle`  | 上凸矩形 |
-| `concave-arc-rectangle` | 上凹矩形 |
-| `double-arc-rectangle`  | 双凸矩形 |
-| `pentagon`              | 五边形   |
-| `hexagon`               | 六边形   |
-| `star`                  | 五角星   |
-| `hexagon-star`          | 六角星   |
-| `heart`                 | 心形     |
-| `circle`                | 圆形     |