@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
64 lines • 2.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var g2_1 = require("@antv/g2");
var POINTER_RADIUS = 10;
var POINTER_LINE_WIDTH = 4;
g2_1.registerShape('point', 'pointer', {
draw: function (cfg, group) {
var point = cfg.points[0];
var center = this.parsePoint({
x: 0,
y: 0,
});
var target = this.parsePoint({
x: point.x,
y: 0.5,
});
var dir_vec = {
x: center.x - target.x,
y: center.y - target.y,
};
//normalize
var length = Math.sqrt(dir_vec.x * dir_vec.x + dir_vec.y * dir_vec.y);
dir_vec.x *= 1 / length;
dir_vec.y *= 1 / length;
//rotate dir_vector by -90 and scale
var angle1 = -Math.PI / 2;
var x_1 = Math.cos(angle1) * dir_vec.x - Math.sin(angle1) * dir_vec.y;
var y_1 = Math.sin(angle1) * dir_vec.x + Math.cos(angle1) * dir_vec.y;
//rotate dir_vector by 90 and scale
var angle2 = Math.PI / 2;
var x_2 = Math.cos(angle2) * dir_vec.x - Math.sin(angle2) * dir_vec.y;
var y_2 = Math.sin(angle2) * dir_vec.x + Math.cos(angle2) * dir_vec.y;
// startx
var angle = Math.atan2(dir_vec.y, dir_vec.x);
var offset = POINTER_LINE_WIDTH / 2 - POINTER_RADIUS;
var startX = center.x + Math.cos(angle) * offset;
var startY = center.y + Math.sin(angle) * offset;
//polygon vertex
var path = [
['M', target.x + x_1 * 1, target.y + y_1 * 1],
['L', startX + x_1 * 3, startY + y_1 * 3],
['L', startX + x_2 * 3, startY + y_2 * 3],
['L', target.x + x_2 * 1, target.y + y_2 * 1],
['Z'],
];
group.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: POINTER_RADIUS,
lineWidth: POINTER_LINE_WIDTH,
stroke: cfg.color,
},
});
var tick = group.addShape('path', {
attrs: {
path: path,
fill: cfg.color,
},
});
return tick;
},
});
//# sourceMappingURL=pointer.js.map