优化 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 生成了一个围绕路径的默认矩形，其大小比实际路径大。
为此，我们可以通过在创建一个路径实例时指定”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 事件监听方面遇到的问题。
以上就是如何优化 ZRender Path 事件监听范围？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2803950.html
