优化 zrender path 事件监听范围

在使用 ZRender 绘制路径时，有时会遇到事件监听范围过大的问题，即使在图形外部点击也会触发事件。对此，ZRender 提供了一个官方解决方案。

我们来构建一个爱心路径来演示这个问题。

var zr = zrender.init(document.getElementById('main'));
var path = new zrender.path.createFromString(`M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30Q 90, 60 50, 90Q 10, 60 10, 30 z`,
    {
        cursor: 'pointer',
        style: {
            fill: 'red',
            stroke: 'blue',
            cursor: 'pointer'
        },
        onclick: function () {
            console.log('click');
        }
    }
);

zr.add(path);

正如我们所见，即使在爱心外部点击，也会触发"click"事件。这是因为 ZRender 生成了一个围绕路径的默认矩形，其大小比实际路径大。

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

为此，我们可以通过在创建一个路径实例时指定"draggable"属性并为其指定一个"ondrag"处理程序来解决这个问题。这将使我们能够在无需更改实际路径形状限制的情况下对拖动事件做出响应。

改进后的代码如下：

var zr = zrender.init(document.getElementById('main'));
var path = new zrender.path.createFromString(`M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30Q 90, 60 50, 90Q 10, 60 10, 30 z`,
    {
        cursor: 'pointer',
        draggable: true,
        style: {
            fill: 'red',
            stroke: 'blue'
        },
        ondrag: function () {
            console.log('click');
        }
    }
);

zr.add(path);

使用此修复后，事件监听范围仅限于路径的实际形状。希望这个解决方案能解决你在 ZRender 事件监听方面遇到的问题。