本文主要是介绍2021SC@SDUSC F2移动端数据可视化源码分析（三），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

2021SC@SDUSC 

Gesture

用于图表绑定图表上的手势事件。该方法会返回 gestureController。除了支持系统基础事件 touchstart、touchmove、touchend，还支持复杂的手势，基于手势库 hammerjs。

如何引入使用插件

Gesture 作为 F2 的插件，完整版不包含该手势插件，如果需要使用的话，需要先将该组件注册入 Chart 类或者 Chart 实例。

hammerjs  压缩文件大小 20k。 GZIP 后大小 7.3k。

const F2 = require('@antv/f2/lib/core');
const Gesture = require('@antv/f2/lib/plugin/gesture');
// 1.全局注册，也可以给 chart 的实例注册
F2.Chart.plugins.register(Gesture);
// 2.给具体的 chart 实例注册
const chart = new F2.Chart({
  id: 'canvas',
  plugins: Gesture
});

API

// 加载初始化手势插件
chart.pluginGesture({
  gesture: {},
  hammerOptions: {},
  options: {},
});

参数

• gesture: Object

需要绑定的手势事件，配置的属性为以事件名为 key 的回调方法。

gesture: {
  touchstart(data, event) {
    console.log('touchstart')
  },
  press(data, event) {
    console.log('press')
  }
}

1. 回调事件的第一个参数，data 是手势事件触发中心点坐标对应的图形数据点。
2. 回调事件的第二个参数，event 是手势事件对象。三个基础手势事件返回的是 touchEvent。hammer 手势返回的事件是 eventObject。
3. hammerOptions: Object

传递给 hammer 的参数配置。一般不需要配置。

• options: Object

手势插件的配置，配置如下

options: {
  useCalculate: true, 
  useOffset: false

这篇关于2021SC@SDUSC F2移动端数据可视化源码分析（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！