手势事件支持

阅读时间约 2 分钟

为了更好地支持移动端对于图表交互的需求,G2 提供了手势事件的解决方案。

引入手势支持

G2 默认没有将手势功能打包至发布包中,需要用户手动引入:

import { registerComponentController } from '@antv/g2';
import Gestrue from '@antv/g2/lib/chart/controller/gesture';

registerComponentController('gesture', Gestrue);

引入之后,我们就可以在 View 上监听相应的手势事件。

手势事件

press

press 点击事件。

// 点击开始
chart.on('pressstart', (ev) => {
  const { points } = ev;
});
// 点击
chart.on('press', (ev) => {
  const { points } = ev;
});
// 点击结束
chart.on('pressend', (ev) => {
  const { points } = ev;
});

pan

pan 滑动事件。

// 滑动开始
chart.on('panstart', (ev) => {
  const { points, direction, deltaX, deltaY } = ev;
});
// 滑动
chart.on('pan', (ev) => {
  const { points, direction, deltaX, deltaY } = ev;
});
// 滑动结束
chart.on('panend', (ev) => {
  const { points, direction, deltaX, deltaY } = ev;
});
  • direction: 滑动方向,'left', 'right', 'up', 'down'
  • deltaX: x 方向的位移
  • deltaY: y 方向的位移

pinch

pinch 双指缩放事件。

// 缩放开始
chart.on('pinchstart', (ev) => {
  const { points, zoom, center } = ev;
});
// 缩放
chart.on('pinch', (ev) => {
  const { points, zoom, center } = ev;
});
// 缩放结束
chart.on('pinchend', (ev) => {
  const { points, zoom, center } = ev;
});
  • zoom: 缩放倍数
  • center: 中心点

swipe

swipe 快扫事件。

// 快扫开始
chart.on('swipestart', (ev) => {
  const { points, direction, deltaX, deltaY, velocity } = ev;
});
// 快扫
chart.on('swipe', (ev) => {
  const { points, direction, deltaX, deltaY, velocity } = ev;
});
// 快扫结束
chart.on('swipeend', (ev) => {
  const { points, direction, deltaX, deltaY, velocity } = ev;
});
  • direction: 滑动方向,'left', 'right', 'up', 'down'
  • deltaX: x 方向的位移
  • deltaY: y 方向的位移
  • velocity: 滑动速率