Permalink
Browse files

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

…f geometrys.
  • Loading branch information...
simaQ committed Jun 7, 2018
1 parent c0236ca commit 74e53218e9bc970feeab5e79ffb62310c31444cf
Showing with 77 additions and 54 deletions.
  1. +29 −8 src/animation/group-action.js
  2. +1 −44 src/animation/util.js
  3. +10 −0 src/chart/chart.js
  4. +2 −2 src/geom/base.js
  5. +35 −0 src/util/helper.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 = {
@@ -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) {
@@ -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];
@@ -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;
@@ -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;
}
};

0 comments on commit 74e5321

Please sign in to comment.