智能指针吸附

在图表中,一些交互元素可能相对较小,因此有时用户难以准确点击并进行其他操作,尤其是在移动设备上。因此,在 Apache EChartsTM 5.4.0 中,我们引入了“智能指针吸附”的概念。

从这个版本开始,默认情况下,ECharts 为移动图表启用指针吸附,为非移动图表禁用。

如果需要在所有平台上启用,可以通过在 init 中设置 opt.useCoarsePointertrue 来实现;设置为 false 则会在所有平台上关闭。

吸附算法

当鼠标或触摸事件发生时,ECharts 将根据鼠标或触摸的位置判断是否与交互元素相交。如果是,则该元素是要交互的对象,这与此优化之前的逻辑相同。如果不是,则在一定范围内找到最接近鼠标或触摸位置的元素。

默认范围是 44px(请参阅 W3C 标准),开发者可以通过在 init 时设置 opt.pointerSize 来设置此值。

更具体地说,ECharts 将在鼠标或触摸位置周围循环不同的角度和不同的半径(在 opt.pointerSize 内),直到找到与之相交的元素。如果找到,则该元素被认为是交互对象。

也就是说,如果一个元素在鼠标或触摸位置的 opt.pointerSize 半径内,则最接近相交的元素被认为是交互对象。

性能

至于实现,我们首先判断鼠标或触摸位置与所有交互元素的 AABB 包围盒之间的相交情况,以便快速消除大多数不相交的元素。然后,我们对剩余的元素执行精确的路径相交判断。因此,从用户体验的角度来看,几乎没有任何可感知的性能损失。

对于具有大规模数据的图表系列(即启用了 large: true 的柱状图、散点图等),将不会启用吸附。

贡献者 在 GitHub 上编辑此页面

Ovilia Oviliaplainheart plainheart