@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
68 lines • 2.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var _ = tslib_1.__importStar(require("@antv/util"));
var g2_1 = require("@antv/g2");
var shape_1 = require("@antv/g2/lib/element/util/shape");
function lerp(a, b, factor) {
return (1 - factor) * a + factor * b;
}
// 获取填充图形的图形属性
function _getFillAttrs(cfg) {
var defaultAttrs = g2_1.Global.theme.shape.interval.rect.default;
var attrs = _.mix({}, defaultAttrs, cfg.style);
shape_1.setFillStyle(attrs, cfg);
return attrs;
}
// 根据矩形关键点绘制 path
function _getRectPath(points, _a) {
var reverse = _a.reverse, ratioUpper = _a.ratioUpper, ratioLower = _a.ratioLower;
var path = [];
var firstPoint = points[0];
var originX = (points[1].x + points[2].x) / 2;
var factorTop = 1.2;
var factorBottom = 0.6;
if (reverse) {
var tmp = ratioLower;
ratioLower = ratioUpper;
ratioUpper = tmp;
}
var firstPointX = (firstPoint.x - originX) * lerp(factorBottom, factorTop, ratioLower) + originX;
path.push(['M', firstPointX, firstPoint.y]);
for (var i = 1, len = points.length; i < len; i++) {
var pointX = points[i].x;
switch (i) {
case 1:
case 2:
pointX = (pointX - originX) * lerp(factorBottom, factorTop, ratioUpper) + originX;
break;
case 3:
pointX = (pointX - originX) * lerp(factorBottom, factorTop, ratioLower) + originX;
break;
}
path.push(['L', pointX, points[i].y]);
}
path.push(['L', firstPointX, firstPoint.y]); // 需要闭合
path.push(['z']);
return path;
}
g2_1.registerShape('interval', 'funnel-dynamic-rect', {
draw: function (cfg, container) {
var attrs = _getFillAttrs(cfg);
var path = _getRectPath(cfg.points, _.get(cfg, 'origin._origin.__custom__'));
path = this.parsePath(path);
return container.addShape('path', {
attrs: tslib_1.__assign(tslib_1.__assign({}, attrs), { path: path }),
});
},
getMarkerStyle: function (markerCfg) {
var isInCircle = markerCfg.isInCircle;
var markerStyle = {
symbol: isInCircle ? 'circle' : 'square',
radius: isInCircle ? 4.5 : 4,
};
shape_1.setFillStyle(markerStyle, markerCfg);
return markerStyle;
},
});
//# sourceMappingURL=funnel-dynamic-rect.js.map