Canvas中判断鼠标对于不规则图形的事件监听

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_31343581/article/details/81604346

在使用echarts的过程中发现，echarts中的不规则图形，对于鼠标的事件监听是非常的准确的。

以前的我非常愚蠢的以为，任何图形的事件判断只是去判断canvas图形所在的一个近似大小的矩形中进行的判断。

通过现象看本质，echarts中的事件实现并不是我想象的那样。于是去搜索了一下资料，最终在MDN上发现了一个十分有用的方法：

Context2D.isPointInPath

这意味着，你所画的不规则图形，都可以通过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;
}

既然能够判断xy是否在图形中，那么模拟绑定事件也是非常简单的事情了，再次做一下记录，满足一下自己的好奇心。