feat: add limitInPlot property for chart, to limit the drawing area o…

…f geometrys.

src/animation/group-action.js

@@ -2,11 +2,12 @@
  * 整体动画
  * @author sima.zhang
  */
-const Helpers = require('./util');
+const Util = require('./util');
+const Helper = require('../util/helper');
 const { Shape } = require('../graphic/index');
 
 function _groupScaleIn(container, animateCfg, coord, zeroY, type) {
-  const { start, end, width, height } = Helpers.getCoordInfo(coord);
+  const { start, end, width, height } = Util.getCoordInfo(coord);
   let x;
   let y;
 
@@ -35,7 +36,7 @@ function _groupScaleIn(container, animateCfg, coord, zeroY, type) {
     }
   }
 
-  const endMatrix = Helpers.getScaledMatrix(clip, [ x, y ], type);
+  const endMatrix = Util.getScaledMatrix(clip, [ x, y ], type);
   clip.isClip = true;
   clip.endState = {
     matrix: endMatrix
@@ -47,7 +48,7 @@ function _groupScaleIn(container, animateCfg, coord, zeroY, type) {
     container.attr('clip', null);
     clip.remove(true);
   };
-  Helpers.doAnimation(clip, clip.endState, animateCfg, onEnd);
+  Util.doAnimation(clip, clip.endState, animateCfg, onEnd);
 }
 
 function _shapeScale(container, animateCfg, type) {
@@ -61,8 +62,8 @@ function _shapeScale(container, animateCfg, type) {
     const box = shape.getBBox();
     x = (box.minX + box.maxX) / 2;
     y = (box.minY + box.maxY) / 2;
-    endMatrix = Helpers.getScaledMatrix(shape, [ x, y ], type);
-    Helpers.doAnimation(shape, { matrix: endMatrix }, animateCfg);
+    endMatrix = Util.getScaledMatrix(shape, [ x, y ], type);
+    Util.doAnimation(shape, { matrix: endMatrix }, animateCfg);
   }
 }
 
@@ -91,14 +92,34 @@ function shapesScaleInXY(container, animateCfg) {
 }
 
 function groupWaveIn(container, animateCfg, coord) {
-  const clip = Helpers.getClip(coord);
+  const clip = Helper.getClip(coord);
   clip.set('canvas', container.get('canvas'));
   container.attr('clip', clip);
   const onEnd = function() {
     container.attr('clip', null);
     clip.remove(true);
   };
-  Helpers.doAnimation(clip, clip.endState, animateCfg, onEnd);
+
+  const endState = {};
+  if (coord.isPolar) {
+    const { startAngle, endAngle } = coord;
+    endState.endAngle = endAngle;
+    clip.attr('endAngle', startAngle);
+  } else {
+    const { start, end } = coord;
+    const width = Math.abs(start.x - end.x);
+    const height = Math.abs(start.y - end.y);
+
+    if (coord.isTransposed) {
+      clip.attr('height', 0);
+      endState.height = height;
+    } else {
+      clip.attr('width', 0);
+      endState.width = width;
+    }
+  }
+
+  Util.doAnimation(clip, endState, animateCfg, onEnd);
 }
 
 module.exports = {

src/animation/util.js

@@ -1,7 +1,7 @@
 /**
  * 动画工具
  */
-const { Shape, Matrix } = require('../graphic/index');
+const { Matrix } = require('../graphic/index');
 const Util = require('../util/common');
 
 const Helpers = {
@@ -61,49 +61,6 @@ const Helpers = {
     }
     return scaledMatrix;
   },
-  getClip(coord) {
-    const { start, end, width, height } = Helpers.getCoordInfo(coord);
-    const margin = 0;
-    let clip;
-
-    if (coord.isPolar) {
-      const { circleRadius, center, startAngle, endAngle } = coord;
-      clip = new Shape.Sector({
-        attrs: {
-          x: center.x,
-          y: center.y,
-          r: circleRadius + margin,
-          r0: 0,
-          startAngle,
-          endAngle: startAngle
-        }
-      });
-      clip.endState = {
-        endAngle
-      };
-    } else {
-      clip = new Shape.Rect({
-        attrs: {
-          x: start.x - margin,
-          y: end.y - margin,
-          width: coord.isTransposed ? width + margin * 2 : 0,
-          height: coord.isTransposed ? 0 : height + margin * 2
-        }
-      });
-
-      if (coord.isTransposed) {
-        clip.endState = {
-          height: height + margin * 2
-        };
-      } else {
-        clip.endState = {
-          width: width + margin * 2
-        };
-      }
-    }
-    clip.isClip = true;
-    return clip;
-  },
   getAnimateParam(animateCfg, index, id) {
     const result = {};
     if (animateCfg.delay) {

src/chart/chart.js

@@ -7,6 +7,7 @@ const ScaleController = require('./controller/scale');
 const AxisController = require('./controller/axis');
 const Global = require('../global');
 const { Canvas } = require('../graphic/index');
+const Helper = require('../util/helper');
 
 function isFullCircle(coord) {
   const startAngle = coord.startAngle;
@@ -485,6 +486,15 @@ class Chart extends Base {
     Chart.plugins.notify(self, 'beforeGeomDraw');
     self._renderAxis();
 
+    // 将 geom 限制在绘图区域内
+    if (self.get('limitInPlot')) {
+      const middlePlot = self.get('middlePlot');
+      const coord = self.get('coord');
+      const clip = Helper.getClip(coord);
+      clip.set('canvas', middlePlot.get('canvas'));
+      middlePlot.attr('clip', clip);
+    }
+
     // 绘制 geom
     for (let i = 0, length = geoms.length; i < length; i++) {
       const geom = geoms[i];

src/geom/base.js

@@ -5,7 +5,7 @@ const FIELD_ORIGIN = '_origin';
 const FIELD_ORIGIN_Y = '_originY';
 const Global = require('../global');
 const Attr = require('../attr/index');
-const Shape = require('./shape/shape');
+const GeometryShape = require('./shape/shape');
 const Adjust = require('./adjust/base');
 
 function parseFields(field) {
@@ -349,7 +349,7 @@ class Geom extends Base {
     let shapeFactory = this.get('shapeFactory');
     if (!shapeFactory) {
       const shapeType = this.get('shapeType');
-      shapeFactory = Shape.getShapeFactory(shapeType);
+      shapeFactory = GeometryShape.getShapeFactory(shapeType);
       this.set('shapeFactory', shapeFactory);
     }
     return shapeFactory;

src/util/helper.js

@@ -0,0 +1,35 @@
+const { Shape } = require('../graphic/');
+module.exports = {
+  getClip(coord) {
+    const start = coord.start;
+    const end = coord.end;
+    const width = end.x - start.x;
+    const height = Math.abs(end.y - start.y);
+    let clip;
+
+    if (coord.isPolar) {
+      const { circleRadius, center, startAngle, endAngle } = coord;
+      clip = new Shape.Sector({
+        attrs: {
+          x: center.x,
+          y: center.y,
+          r: circleRadius,
+          r0: 0,
+          startAngle,
+          endAngle
+        }
+      });
+    } else {
+      clip = new Shape.Rect({
+        attrs: {
+          x: start.x,
+          y: end.y,
+          width,
+          height
+        }
+      });
+    }
+    clip.isClip = true;
+    return clip;
+  }
+};