在使用echarts的过程中发现,echarts中的不规则图形,对于鼠标的事件监听是非常的准确的。
以前的我非常愚蠢的以为,任何图形的事件判断只是去判断canvas图形所在的一个近似大小的矩形中进行的判断。
通过现象看本质,echarts中的事件实现并不是我想象的那样。于是去搜索了一下资料,最终在MDN上发现了一个十分有用的方法:
这意味着,你所画的不规则图形,都可以通过context的这个方法进行判断,在网上找了代码,写了一下伪代码如下:
// 判断x,y是否在图形中
function in(x, y, graph) {
var isIn = false;
// 获取context
var context = graph.getContext();
// 模拟重绘需要判断时间的图形
context.save();
graph.shadowDraw();
if (context.isPointInPath(x, y)) {
isIn = true;
}
context.restore();
return isIn;
}