Feature: coarse pointer tolerance

[Ovilia]

Intent

This PR is intended to increase elements' responsive area on mobile devices so that elements can be touched more easily.

The idea is inspired by W3C's Understanding Success Criterion 2.5.5: Target Size.

Algorithm

The algorithm can be briefly described as:

1. Find the hovering element at the pointer position. If it exists, return the hovering element. Otherwise, go to 2.
2. Calculate the elements whose bounding boxes have intersection with the touch position enlarged by "pointerSize" (which is 44px by default)
3. Loop through different radius and angle from the pointer position to check if there are elements intersecting with it.

For cases that have too many elements, this feature can be turned off by setting ignoreCoarsePointer to the elements.

Tested with the Apache ECharts test cases and in most cases the extra calculation time is under 0.1ms.

API

zrender.init({
  useCoarsePointer: 'auto',
  pointerSize: 44,
  ...
});

• useCoarsePointer ('auto' | true | false): whether to enable thie feature. If set to be 'auto', it's turned on only for mobile devices.
• pointerSize (number): pointer position is increased by this size in diameter.

Each element can be set with ignoreCoarsePointer to turn off this feature individually:

el.ignoreCoarsePointer = true;

[pissang]

The whole design looks good. There are several optimizations we can do to improve the code. I commented about them.

[pissang]

I have no more questions on this PR

[plainheart]

LGTM