feat: interval support lineCap round (#3036)

* feat: add dev file * feat: add interval cap * revert unit test code * feat: support rect type * fix: fix unit error * feat: delete console log * feat: optimize some logic * feat: add unit * feat: add convertPolarPath type a unit
antvis · Nov 30, 2020 · 2907ac7 · 2907ac7
1 parent 694f209
commit 2907ac7
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 17 deletions.
diff --git a/src/geometry/shape/interval/index.ts b/src/geometry/shape/interval/index.ts
@@ -3,7 +3,7 @@ import { Point, ShapeInfo, ShapeMarkerCfg, ShapePoint } from '../../../interface
 
 import { registerShape, registerShapeFactory } from '../base';
 import { getStyle } from '../util/get-style';
-import { getRectPath, getRectPoints } from './util';
+import { getIntervalRectPath, getRectPoints } from './util';
 
 /** Interval 的 shape 工厂 */
 const IntervalShapeFactory = registerShapeFactory('interval', {
@@ -17,7 +17,7 @@ const IntervalShapeFactory = registerShapeFactory('interval', {
 registerShape('interval', 'rect', {
   draw(cfg: ShapeInfo, container: IGroup) {
     const style = getStyle(cfg, false, true);
-    const path = this.parsePath(getRectPath(cfg.points as Point[]));
+    const path = this.parsePath(getIntervalRectPath(cfg.points as Point[], style.lineCap, this.coordinate));
     const shape = container.addShape('path', {
       attrs: {
         ...style,

diff --git a/src/geometry/shape/interval/util.ts b/src/geometry/shape/interval/util.ts
@@ -1,3 +1,4 @@
+import { Coordinate } from '@antv/coord';
 import { isArray, isNil } from '@antv/util';
 import { PathCommand } from '../../../dependents';
 import { Point, ShapePoint } from '../../../interface';
@@ -82,6 +83,42 @@ export function getRectPath(points: Point[], isClosed: boolean = true): PathComm
   return path;
 }
 
+/**
+ * @ignore
+ * 根据矩形关键点绘制 path
+ * @param points 关键点数组
+ * @param lineCap 'round'圆角样式
+ * @param coor 坐标
+ * @returns 返回矩形的 path
+ */
+export function getIntervalRectPath(points: Point[], lineCap: CanvasLineCap, coor: Coordinate): PathCommand[] {
+  const width = coor.getWidth();
+  const height = coor.getHeight();
+  const isRect = coor.type === 'rect';
+  let path = [];
+  const r = (points[2].x - points[1].x) / 2;
+  const ry = coor.isTransposed ? (r * height) / width : (r * width) / height;
+  if (lineCap === 'round') {
+    if (isRect) {
+      path.push(['M', points[0].x, points[0].y + ry]);
+      path.push(['L', points[1].x, points[1].y - ry]);
+      path.push(['A', r, r, 0, 0, 1, points[2].x, points[2].y - ry]);
+      path.push(['L', points[3].x, points[3].y + ry]);
+      path.push(['A', r, r, 0, 0, 1, points[0].x, points[0].y + ry]);
+    } else {
+      path.push(['M', points[0].x, points[0].y]);
+      path.push(['L', points[1].x, points[1].y]);
+      path.push(['A', r, r, 0, 0, 1, points[2].x, points[2].y]);
+      path.push(['L', points[3].x, points[3].y]);
+      path.push(['A', r, r, 0, 0, 1, points[0].x, points[0].y]);
+    }
+    path.push(['z']);
+  } else {
+    path = getRectPath(points);
+  }
+  return path;
+}
+
 /**
  * @ignore
  * 根据 funnel 关键点绘制漏斗图的 path

diff --git a/src/geometry/shape/util/path.ts b/src/geometry/shape/util/path.ts
@@ -32,14 +32,28 @@ function _convertArr(arr: number[], coord: Coordinate): any[] {
   }
   return tmp;
 }
+function _convertArcPath(path: PathCommand, coord: Coordinate): any[] {
+  const { isTransposed } = coord;
+  const r = path[1];
+  const x = path[6];
+  const y = path[7];
+  const point = coord.convert({ x, y });
+  const direction = isTransposed ? 0 : 1;
+  return ['A', r, r, 0, 0, direction, point.x, point.y];
+}
 
 function _convertPolarPath(pre: PathCommand, cur: PathCommand, coord: Coordinate): PathCommand[] {
   const { isTransposed, startAngle, endAngle } = coord;
-
-  const prePoint = {
-    x: pre[1],
-    y: pre[2],
-  };
+  const prePoint =
+    pre[0].toLowerCase() === 'a'
+      ? {
+          x: pre[6],
+          y: pre[7],
+        }
+      : {
+          x: pre[1],
+          y: pre[2],
+        };
   const curPoint = {
     x: cur[1],
     y: cur[2],
@@ -257,6 +271,9 @@ export function convertNormalPath(coord, path: PathCommand[]): PathCommand[] {
       case 'c':
         tmp.push(_convertArr(subPath, coord));
         break;
+      case 'a':
+        tmp.push(_convertArcPath(subPath, coord));
+        break;
       case 'z':
       default:
         tmp.push(subPath);
@@ -298,6 +315,9 @@ export function convertPolarPath(coord, path: PathCommand[]): PathCommand[] {
           tmp.push(_convertArr(subPath, coord));
         }
         break;
+      case 'a':
+        tmp.push(_convertArcPath(subPath, coord));
+        break;
       case 'z':
       default:
         tmp.push(subPath);

diff --git a/tests/unit/geometry/shape/interval-spec.ts b/tests/unit/geometry/shape/interval-spec.ts
@@ -105,23 +105,47 @@ describe('Interval shapes', () => {
         size: 0.2,
       };
       const points = IntervalShapeFactory.getShapePoints('rect', cfg);
-      const shape = IntervalShapeFactory.drawShape(
+      const shapeCfg = {
+        x: 100,
+        y: 100,
+        points,
+        color: 'red',
+        defaultStyle: {
+          ...Theme.geometries.interval.rect.default.style,
+        },
+      };
+      const shape = IntervalShapeFactory.drawShape('rect', shapeCfg, element.container);
+      const lineCapRoundShape = IntervalShapeFactory.drawShape(
         'rect',
         {
-          x: 100,
-          y: 100,
-          points,
-          color: 'red',
-          defaultStyle: {
-            ...Theme.geometries.interval.rect.default.style,
+          ...shapeCfg,
+          style: {
+            lineCap: 'round',
           },
         },
         element.container
       );
       canvas.draw();
+
       expect(shape.attr('fill')).toBe('red');
-      expect(shape.attr('path').length).toBe(6);
       expect(shape.getBBox().width).toBe(100);
+
+      const shapePath = shape.attr('path');
+      let hapePathTypes = [];
+      shapePath.forEach((path) => {
+        hapePathTypes.push(path[0]);
+      });
+      expect(shapePath.length).toBe(6);
+      expect(hapePathTypes).toEqual(['M', 'L', 'L', 'L', 'L', 'Z']);
+
+      // lineCap:'round'
+      const lineCapRoundShapePath = lineCapRoundShape.attr('path');
+      let lineCapRoundShapePathTypes = [];
+      lineCapRoundShapePath.forEach((path) => {
+        lineCapRoundShapePathTypes.push(path[0]);
+      });
+      expect(lineCapRoundShapePath.length).toBe(6);
+      expect(lineCapRoundShapePathTypes).toEqual(['M', 'L', 'A', 'L', 'A', 'Z']);
     });
 
     it('getMarker', () => {

diff --git a/tests/unit/geometry/shape/util/path-spec.ts b/tests/unit/geometry/shape/util/path-spec.ts
@@ -90,13 +90,15 @@ describe('PathUtil', () => {
     const path: PathCommand[] = [
       ['M', 0, 0],
       ['L', 0, 1],
-      ['L', 0.25, 1],
+      ['A', 0.25, 0.25, 0, 0, 1, 0.5, 1],
+      ['L', 0.5, 0],
     ];
     const toPath = convertPolarPath(coord, path);
     expect(toPath).toEqual([
       ['M', 100, 100],
       ['L', 100, 0],
-      ['A', 100, 100, 0, 0, 1, 200, 100],
+      ['A', 0.25, 0.25, 0, 0, 1, 100, 200],
+      ['L', 100, 100],
     ]);
   });
 });