Feat/rect shape for liquid (#2430)

* feat(liquid): add one built-in shape rect * chore(liquid): add test case for rect shape * docs(liquid): add rect shape for built-in shape
antvis · Mar 17, 2021 · fd9ad5a · fd9ad5a
1 parent 55842a6
commit fd9ad5a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/__tests__/unit/plots/liquid/liquid-shape-spec.ts b/__tests__/unit/plots/liquid/liquid-shape-spec.ts
@@ -26,6 +26,10 @@ describe('liquid', () => {
       name: 'circle',
       clipPath: [['M', 300, 16], ['A', 134, 134, 0, 1, 0, 300, 284], ['A', 134, 134, 0, 1, 0, 300, 16], ['Z']],
     },
+    {
+      name: 'rect',
+      clipPath: [['M', 217.188, 16], ['L', 382.812, 16], ['L', 382.812, 284], ['L', 217.188, 284], ['Z']],
+    },
   ];
 
   const shapeProps = {

diff --git a/docs/api/plots/liquid.en.md b/docs/api/plots/liquid.en.md
@@ -35,7 +35,7 @@ Liguid graphic style.
 
 <description>**optional** _String | Function_ default: `circle`</description>
 
-There are four built-in shapes for liquid plot: `circle | diamond | triangle | pin`. It aslo supports custom shape if shape is a callback function to build path.
+There are five built-in shapes for liquid plot: `circle | diamond | triangle | pin | rect`. It aslo supports custom shape if shape is a callback function to build path.
 
 示例代码如下：
 

diff --git a/docs/api/plots/liquid.zh.md b/docs/api/plots/liquid.zh.md
@@ -35,7 +35,7 @@ order: 6
 
 <description>**optional** _String | Function_ default: `circle`</description>
 
-水波图有四种内置形状：`circle | diamond | triangle | pin`。同时也支持自定义图形，这个时候需要传入一个构建 Path 的回调函数。
+水波图有五种内置形状：`circle | diamond | triangle | pin | rect`。同时也支持自定义图形，这个时候需要传入一个构建 Path 的回调函数。
 
 示例代码如下：
 

diff --git a/src/plots/liquid/shapes/liquid.ts b/src/plots/liquid/shapes/liquid.ts
@@ -347,6 +347,26 @@ function triangle(x: number, y: number, width: number, height: number) {
     `;
 }
 
+/**
+ *
+ * @param x 中心 x
+ * @param y 中心 y
+ * @param width 外接矩形的宽
+ * @param height 外接矩形的高
+ */
+function rect(x: number, y: number, width: number, height: number) {
+  const GOLDEN_SECTION_RATIO = 0.618;
+  const h = height / 2;
+  const w = (width / 2) * GOLDEN_SECTION_RATIO;
+  return `
+      M ${x - w} ${y - h}
+      L ${x + w} ${y - h}
+      L ${x + w} ${y + h}
+      L ${x - w} ${y + h}
+      Z
+    `;
+}
+
 registerShape('interval', 'liquid-fill-gauge', {
   draw(cfg: any, container: IGroup) {
     const cx = 0.5;
@@ -382,6 +402,7 @@ registerShape('interval', 'liquid-fill-gauge', {
       circle,
       diamond,
       triangle,
+      rect,
     };
     const buildPath = typeof shape === 'function' ? shape : builtInShapeByName[shape] || builtInShapeByName['circle'];
     const shapePath = buildPath(center.x, center.y, innerRadius * 2, innerRadius * 2);