248 lines
6.8 KiB
Java
248 lines
6.8 KiB
Java
/**
|
|
* @fileOverview point shapes
|
|
* @author dxq613@gmail.com
|
|
* @author sima.zhang1990@gmail.com
|
|
* @author huangtonger@aliyun.com
|
|
*/
|
|
var Util = require('../../util');
|
|
|
|
var ShapeUtil = require('../util/shape');
|
|
|
|
var Global = require('../../global');
|
|
|
|
var Shape = require('./shape'); // const svgpath = require('svgpath');
|
|
|
|
|
|
var _require = require('../../renderer'),
|
|
Marker = _require.Marker;
|
|
|
|
var PathUtil = Util.PathUtil;
|
|
var SHAPES = ['circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down'];
|
|
var HOLLOW_SHAPES = ['cross', 'tick', 'plus', 'hyphen', 'line', 'pointerLine', 'pointerArrow'];
|
|
var SQRT_3 = Math.sqrt(3); // 增加marker
|
|
|
|
Util.mix(Marker.Symbols, {
|
|
hexagon: function hexagon(x, y, r) {
|
|
var diffX = r / 2 * SQRT_3;
|
|
return [['M', x, y - r], ['L', x + diffX, y - r / 2], ['L', x + diffX, y + r / 2], ['L', x, y + r], ['L', x - diffX, y + r / 2], ['L', x - diffX, y - r / 2], ['Z']];
|
|
},
|
|
bowtie: function bowtie(x, y, r) {
|
|
var diffY = r - 1.5;
|
|
return [['M', x - r, y - diffY], ['L', x + r, y + diffY], ['L', x + r, y - diffY], ['L', x - r, y + diffY], ['Z']];
|
|
},
|
|
cross: function cross(x, y, r) {
|
|
return [['M', x - r, y - r], ['L', x + r, y + r], ['M', x + r, y - r], ['L', x - r, y + r]];
|
|
},
|
|
tick: function tick(x, y, r) {
|
|
return [['M', x - r / 2, y - r], ['L', x + r / 2, y - r], ['M', x, y - r], ['L', x, y + r], ['M', x - r / 2, y + r], ['L', x + r / 2, y + r]];
|
|
},
|
|
plus: function plus(x, y, r) {
|
|
return [['M', x - r, y], ['L', x + r, y], ['M', x, y - r], ['L', x, y + r]];
|
|
},
|
|
hyphen: function hyphen(x, y, r) {
|
|
return [['M', x - r, y], ['L', x + r, y]];
|
|
},
|
|
line: function line(x, y, r) {
|
|
return [['M', x, y - r], ['L', x, y + r]];
|
|
}
|
|
});
|
|
|
|
function getFillAttrs(cfg) {
|
|
var defaultAttrs = Global.shape.point;
|
|
var pointAttrs = Util.mix({}, defaultAttrs, cfg.style);
|
|
ShapeUtil.addFillAttrs(pointAttrs, cfg);
|
|
|
|
if (Util.isNumber(cfg.size)) {
|
|
pointAttrs.radius = cfg.size;
|
|
}
|
|
|
|
return pointAttrs;
|
|
}
|
|
|
|
function getLineAttrs(cfg) {
|
|
var defaultAttrs = Global.shape.hollowPoint;
|
|
var pointAttrs = Util.mix({}, defaultAttrs, cfg.style);
|
|
ShapeUtil.addStrokeAttrs(pointAttrs, cfg);
|
|
|
|
if (Util.isNumber(cfg.size)) {
|
|
pointAttrs.radius = cfg.size;
|
|
}
|
|
|
|
return pointAttrs;
|
|
}
|
|
|
|
var Point = Shape.registerFactory('point', {
|
|
defaultShapeType: 'hollowCircle',
|
|
getActiveCfg: function getActiveCfg(type, cfg) {
|
|
// 点放大 + 颜色加亮
|
|
var radius = cfg.radius;
|
|
var color;
|
|
|
|
if (type && (type.indexOf('hollow') === 0 || Util.indexOf(HOLLOW_SHAPES, type) !== -1) || !type) {
|
|
color = cfg.stroke || cfg.strokeStyle;
|
|
} else {
|
|
color = cfg.fill || cfg.fillStyle;
|
|
}
|
|
|
|
return {
|
|
radius: radius + 1,
|
|
shadowBlur: radius,
|
|
shadowColor: color,
|
|
stroke: color,
|
|
strokeOpacity: 1,
|
|
lineWidth: 1
|
|
};
|
|
},
|
|
getDefaultPoints: function getDefaultPoints(pointInfo) {
|
|
return ShapeUtil.splitPoints(pointInfo);
|
|
}
|
|
});
|
|
|
|
function getRectPath(cfg) {
|
|
var x = cfg.points[0].x;
|
|
var y = cfg.points[0].y;
|
|
var w = cfg.size[0];
|
|
var h = cfg.size[1];
|
|
var path = [['M', x - 0.5 * w, y - 0.5 * h], ['L', x + 0.5 * w, y - 0.5 * h], ['L', x + 0.5 * w, y + 0.5 * h], ['L', x - 0.5 * w, y + 0.5 * h], ['z']];
|
|
return path;
|
|
} // 用于桑基图的节点
|
|
|
|
|
|
Shape.registerShape('point', 'rect', {
|
|
draw: function draw(cfg, container) {
|
|
var rectAttrs = getFillAttrs(cfg);
|
|
var path = getRectPath(cfg);
|
|
path = this.parsePath(path);
|
|
var gShape = container.addShape('path', {
|
|
attrs: Util.mix(rectAttrs, {
|
|
path: path
|
|
})
|
|
});
|
|
return gShape;
|
|
},
|
|
getMarkerCfg: function getMarkerCfg(cfg) {
|
|
var attrs = getFillAttrs(cfg);
|
|
attrs.symbol = 'rect';
|
|
attrs.radius = 4.5;
|
|
return attrs;
|
|
}
|
|
}); // 添加shapes
|
|
|
|
Util.each(SHAPES, function (shape) {
|
|
Shape.registerShape('point', shape, {
|
|
draw: function draw(cfg, container) {
|
|
// cfg.points = this.parsePoints(cfg.points);
|
|
var attrs = getFillAttrs(cfg);
|
|
return container.addShape('Marker', {
|
|
attrs: Util.mix(attrs, {
|
|
symbol: shape,
|
|
x: cfg.x,
|
|
y: cfg.y
|
|
})
|
|
});
|
|
},
|
|
getMarkerCfg: function getMarkerCfg(cfg) {
|
|
var attrs = getFillAttrs(cfg);
|
|
attrs.symbol = shape;
|
|
attrs.radius = 4.5;
|
|
return attrs;
|
|
}
|
|
}); // 添加该 shape 对应的 hollowShape
|
|
|
|
Shape.registerShape('point', 'hollow' + Util.upperFirst(shape), {
|
|
draw: function draw(cfg, container) {
|
|
// cfg.points = this.parsePoints(cfg.points);
|
|
var attrs = getLineAttrs(cfg);
|
|
return container.addShape('Marker', {
|
|
attrs: Util.mix(attrs, {
|
|
symbol: shape,
|
|
x: cfg.x,
|
|
y: cfg.y
|
|
})
|
|
});
|
|
},
|
|
getMarkerCfg: function getMarkerCfg(cfg) {
|
|
var attrs = getLineAttrs(cfg);
|
|
attrs.symbol = shape;
|
|
attrs.radius = 4.5;
|
|
return attrs;
|
|
}
|
|
});
|
|
}); // 添加 hollowShapes
|
|
|
|
Util.each(HOLLOW_SHAPES, function (shape) {
|
|
Shape.registerShape('point', shape, {
|
|
draw: function draw(cfg, container) {
|
|
var attrs = getLineAttrs(cfg);
|
|
return container.addShape('Marker', {
|
|
attrs: Util.mix(attrs, {
|
|
symbol: shape,
|
|
x: cfg.x,
|
|
y: cfg.y
|
|
})
|
|
});
|
|
},
|
|
getMarkerCfg: function getMarkerCfg(cfg) {
|
|
var attrs = getLineAttrs(cfg);
|
|
attrs.symbol = shape;
|
|
attrs.radius = 4.5;
|
|
return attrs;
|
|
}
|
|
});
|
|
}); // image
|
|
|
|
Shape.registerShape('point', 'image', {
|
|
draw: function draw(cfg, container) {
|
|
cfg.points = this.parsePoints(cfg.points);
|
|
return container.addShape('image', {
|
|
attrs: {
|
|
x: cfg.points[0].x - cfg.size / 2,
|
|
y: cfg.points[0].y - cfg.size,
|
|
width: cfg.size,
|
|
height: cfg.size,
|
|
img: cfg.shape[1]
|
|
}
|
|
});
|
|
}
|
|
}); // path
|
|
|
|
var pathMetaCache = {};
|
|
Shape.registerShape('point', 'path', {
|
|
draw: function draw(cfg, container) {
|
|
var attrs = Util.mix({}, getLineAttrs(cfg), getFillAttrs(cfg));
|
|
var path = cfg.shape[1];
|
|
var size = cfg.size || 10;
|
|
var pathMeta;
|
|
|
|
if (pathMetaCache[path]) {
|
|
pathMeta = pathMetaCache[path];
|
|
} else {
|
|
var segments = PathUtil.parsePathString(path);
|
|
var nums = Util.flatten(segments).filter(function (num) {
|
|
return Util.isNumber(num);
|
|
});
|
|
pathMetaCache[path] = pathMeta = {
|
|
range: Math.max.apply(null, nums) - Math.min.apply(null, nums),
|
|
segments: segments
|
|
};
|
|
}
|
|
|
|
var scale = size / pathMeta.range;
|
|
var transform = [];
|
|
|
|
if (attrs.rotate) {
|
|
transform.push(['r', attrs.rotate / 180 * Math.PI]);
|
|
delete attrs.rotate;
|
|
}
|
|
|
|
var shape = container.addShape('path', {
|
|
attrs: Util.mix(attrs, {
|
|
path: pathMeta.segments
|
|
})
|
|
});
|
|
transform.push(['s', scale, scale], ['t', cfg.x, cfg.y]);
|
|
shape.transform(transform);
|
|
return shape;
|
|
}
|
|
});
|
|
module.exports = Point; |