Merge pull request #11404 from qkiroc/feat/shape-radius

feat: 优化shape组件圆角算法
baidu · Dec 20, 2024 · d34d619 · d34d619
2 parents e169b32 + ed5b0c7
commit d34d619
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 202 deletions.
diff --git a/docs/zh-CN/components/shape.md b/docs/zh-CN/components/shape.md
@@ -85,7 +85,7 @@ icon:
         type: 'shape',
         className: 'm-2',
         shapeType: 'square',
-        radius: 4
+        radius: -4
       },
       {
         type: 'shape',
@@ -132,12 +132,11 @@ icon:
         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"
+          "M28.7312529,0.451996665 L1.92575684,15.8327405 C0.641918945,16.9201671 0,17.8552977 0,18.6381323 C0,19.4209669 0,23.7793686 0,31.7133374 L30.1233295,49.1882469 L54.74597,35.1754816 L54.74597,42.2129373 L31.0027368,56.1570351 C30.3803008,56.644996 29.8461111,56.644996 29.4001678,56.1570351 C28.9542245,55.6690741 19.1541686,49.8258134 0,38.6272531 L0,45.7376111 L28.7312529,62.5701394 C29.9104176,63.1432869 31.0961916,63.1432869 32.2885747,62.5701394 C33.4809578,61.9969918 43.0514329,56.3861491 61,45.7376111 L61,24.3532598 C43.0365968,34.8706536 33.4661217,40.4338687 32.2885747,41.0429051 C30.5222542,41.9564597 30.0828355,41.8389106 28.7312529,41.0429051 C27.8301979,40.5122348 20.3630035,36.1320948 6.32966971,27.9024851 L6.32966971,21.8340463 L16.8640877,27.2811313 C18.1811929,27.7179433 19.2031727,27.7179433 19.9300272,27.2811313 C20.6568816,26.8443193 28.2327888,22.3902338 42.6577487,13.9188748 L47.8268453,17.033462 C48.2333133,17.6822864 48.064461,18.2171765 47.3202883,18.6381323 C46.5761157,19.0590881 39.0914758,23.234167 24.8663686,31.1633689 L30.1233295,35.1754816 L61,17.9315096 L43.3323939,6.26763183 L18.1933006,20.3607536 L13.3840291,17.033462 L36.6348401,3.39932681 L32.7397763,0.451996665 C31.8901421,0.150665555 31.2386503,0 30.7853012,0 C30.331952,0 29.6472692,0.150665555 28.7312529,0.451996665 Z",
+          "M85.4606259,16 C91.6887073,16 98,19.9446168 98,24.4357411 L98,40.7476187 C96.2218371,46.2492062 93.4906486,49 89.8064346,49 C86.1222206,49 83.1967025,48.9610235 81.0298802,48.8830705 C79.1204375,48.1724054 77.850878,47.5467586 77.2212016,47.0061299 C75.1137392,45.1967008 74.0196778,43.6199029 73.6733281,42.7807824 C73.2701673,41.8040225 71.9205412,38.0832352 74.7691152,33.7965154 C76.4122418,31.3238313 79.7102167,29.6814742 82.6168695,29.3805022 L92.0014918,29.3805022 L92.0014918,24.4357411 C90.1259032,22.5455883 87.9456146,21.600512 85.4606259,21.600512 L84.7605642,21.6006889 C81.8851835,21.6087957 80.8791028,21.7977752 74.4275673,25.5002778 L74.4275673,20.825158 C77.6308853,17.608386 81.3085715,16 85.4606259,16 Z M92.1136435,33.8360358 L84.9688911,33.8360358 C80.9383044,34.662764 78.9230111,36.3792944 78.9230111,38.985627 C78.9230111,41.5919597 80.2819885,43.3084901 82.9999432,44.1352182 L87.9615254,44.1352182 C90.0138334,44.1352182 91.3978727,42.8170486 92.1136435,40.1807095 L92.1136435,33.8360358 Z",
+          "M106,45.9058326 L106.12203,26.0591328 C107.998819,19.3539517 112.44853,16.0013611 119.471163,16.0013611 C123.091874,15.9443424 126.348706,17.6787713 129.241661,21.2046476 C131.146086,17.7357899 134.533925,16.0013611 139.405178,16.0013611 C142.929724,16.0013611 147.449054,17.71895 149.676343,21.7722423 C150.188086,22.7035287 150.629305,24.1324922 151,26.0591328 L150.880889,48 L148.277496,48 C146.491015,47.376753 145.444467,46.3780151 145.137852,45.0037864 C145.137852,44.4024223 145.137852,38.5872358 145.137852,27.5582269 C144.726084,23.8837882 142.815193,21.9551266 139.405178,21.7722423 C134.290157,21.4979157 131.885977,24.5600387 131.885977,26.0591328 C131.885977,27.0585289 131.885977,34.3721513 131.885977,48 L127.514392,48 C126.066497,47.117215 125.34255,46.1184772 125.34255,45.0037864 C125.34255,43.8890957 125.34255,37.7903229 125.34255,26.707468 C124.168415,23.4173175 121.973924,21.7722423 118.759078,21.7722423 C113.936808,21.7722423 112.018661,24.9975268 112.018661,26.707468 C112.018661,27.8474288 112.018661,34.9449395 112.018661,48 L108.414781,48 C107.890079,47.9047657 107.35644,47.6282578 106.813864,47.1704763 C106.271288,46.7126949 106,46.291147 106,45.9058326 Z",
+          "M160.140201,16.7159953 L160.140201,42.1967437 C160.100175,42.583777 160.383858,43.4742319 160.991248,44.8681084 C161.950865,47.0702956 165.286128,49 168.094575,49 C171.736366,49 173.350406,47.1468859 172.936694,43.4406577 L168.094575,43.4406577 C166.412106,43.1933185 165.570871,42.1819868 165.570871,40.4066624 C165.570871,38.6313381 165.570871,31.8283876 165.570871,19.997811 C164.879352,18.0634863 163.857786,16.9695478 162.506173,16.7159953 C161.15456,16.4624429 160.365903,16.4624429 160.140201,16.7159953 Z M162.757704,12.6808435 C164.833027,12.6808435 166.515408,10.9614281 166.515408,8.84042173 C166.515408,6.71941538 164.833027,5 162.757704,5 C160.682381,5 159,6.71941538 159,8.84042173 C159,10.9614281 160.682381,12.6808435 162.757704,12.6808435 Z",
+          "M177.00791,25.6466313 C176.697727,34.2604795 185.59716,34.4875652 188.32068,34.8600665 C191.0442,35.2325677 193.783492,36.1062875 193.783492,39.4670446 C193.783492,42.8278017 191.560993,43.4871964 189.446164,43.4871964 C187.331335,43.4871964 187.047369,43.6717882 184.447219,43.4871964 C182.713785,43.3641352 180.442017,42.1357631 177.631913,39.8020801 L177.631913,44.8030644 C179.513873,47.6010215 182.71894,49 187.247112,49 C194.03937,49 200,45.5737365 200,38.8852924 C200,32.1968484 193.250147,29.9615425 185.661293,28.8150427 C182.33376,27.9726002 182.963706,26.4071448 182.963706,24.4700092 C182.963706,22.5328736 186.910243,21.4851146 189.928058,21.4851146 C192.945874,21.4851146 198.713517,23.9817612 198.713517,24.7718362 C198.713517,25.2985529 198.713517,23.5269195 198.713517,19.4569362 C197.801499,18.3656594 196.499944,17.4867226 194.808852,16.8201258 C192.272215,15.8202307 190.383829,16.0153824 187.522469,16.0153824 C182.366988,16.0153824 177.197843,20.3721739 177.00791,25.6466313 Z"
         ]
       }
     ]
@@ -165,7 +164,6 @@ icon:
       {"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"},
@@ -207,11 +205,12 @@ icon:
 
 ## 属性表
 
-| 属性名    | 类型         | 默认值    | 说明                |
-| --------- | ------------ | --------- | ------------------- |
-| type      | `string`     | `'shape'` | 指定为图形渲染器    |
-| shapeType | `IShapeType` | `'-'`     | 图形类型            |
-| className | `string`     |           | 自定义 CSS 样式类名 |
-| width     | `number`     | `200`     | 图形宽度            |
-| height    | `number`     | `200`     | 图形大小            |
-| radius    | `number`     | `0`       | 圆角大小（1-10）    |
+| 属性名    | 类型         | 默认值    | 说明                  |
+| --------- | ------------ | --------- | --------------------- |
+| type      | `string`     | `'shape'` | 指定为图形渲染器      |
+| shapeType | `IShapeType` | `'-'`     | 图形类型              |
+| className | `string`     |           | 自定义 CSS 样式类名   |
+| color     | `string`     |           | 填充颜色              |
+| width     | `number`     | `200`     | 图形宽度              |
+| height    | `number`     | `200`     | 图形大小              |
+| radius    | `number`     | `0`       | 圆角大小,负数表示内弧 |
diff --git a/packages/amis-theme-editor-helper/rollup.config.js b/packages/amis-theme-editor-helper/rollup.config.js
@@ -48,6 +48,11 @@ const pkgs = [];
   }
 });
 
+const index = pkgs.indexOf('style-inject');
+if (~index) {
+  pkgs.splice(index, 1);
+}
+
 const external = id =>
   pkgs.some(pkg => id.startsWith(pkg) || ~id.indexOf(`node_modules/${pkg}`));
 const input = ['./src/index.ts'];

diff --git a/packages/amis-ui/scss/components/_shape.scss b/packages/amis-ui/scss/components/_shape.scss
@@ -1,5 +1,5 @@
 /**
- * @file _shape.scss 
+ * @file _shape.scss
  *
  * @author allenve([email protected])
  * @created: 2024/12/12