智能指针捕捉

在图表中,某些交互元素可能比较小,因此有时用户很难准确地单击并执行其他操作,尤其是在移动设备上。因此,在 Apache EChartsTM 5.4.0 中,我们引入了“智能指针捕捉”的概念。

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

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

捕捉算法

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

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

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

即,如果某个元素在鼠标或触控位置的 opt.pointerSize 半径范围内,则最接近且相交的元素被认为是交互对象。

性能

在实现上,我们首先判断鼠标或触控位置与所有交互元素的 AABB 包围盒是否相交,从而快速排除大部分不相交的元素。然后,对剩余元素进行精确的路径相交判断。因此,从用户体验的角度来看,几乎没有感知到的性能损失。

对于数据量较大的图表系列(即启用了 large: true 的柱状图、散点图等),将不会启用捕捉。

贡献者 在 GitHub 上编辑此页面

Ovilia Oviliaplainheart plainheart