2021SC@SDUSC“F2移动端可视化方案”源码分析（十二）——自定义Interaction

2021SC@SDUSC

目录

简介

Interaction 基类

Interaction 基类类图

 支持的事件

公有属性

公有方法

注册交互行为

使用交互行为

清除交互行为

---

简介

F2 的 3.2 版本提供了一套交互行为的注册机制，来达到通用交互行为的封装和复用。

一系列基础的事件组成一种具体的交互行为，同时交互行为也可提供配置化的反馈（结果）。在 F2 交互机制中，每一个交互行为包括三个环节：

1. 触发，对应一种触发事件
2. 持续，对应一种持续事件
3. 结束，对应一种结束事件

自定义交互行为的流程如下：

基于 Interaction 基类，定义交互行为子类 -> 注册该交互行为类 -> 使用该交互行为。

Interaction 基类

交互模块默认没有打包至 @antv/f2 模块包中。所以在使用时需要手动引入：

// 引入 Interaction 基类
const Interaction = require('@antv/f2/lib/interaction/base');

Interaction 基类类图

 支持的事件

该类基于 Hammer.js 手势库，支持手势事件以及 H5 的 touchstart、toucchmove、touchend 事件。

公有属性

基类中定义了如下的公有属性：

// 公有属性
startEvent: 'touchstart', // 触发事件名称
processEvent: 'touchmove', // 持续事件名称
endEvent: 'touchend', // 结束事件名称
resetEvent: null // 恢复图表原始状态的触发事件

公有方法

同时还默认提供了在每种状态事件触发后的钩子，用户可以通过使用这些钩子做一些操作。

onStart(e) {}    // 交互行为触发后的钩子
onProcess(e) {}  // 交互行为持续过程中的钩子
onEnd(e) {}      // 交互行为结束时的钩子
onReset(e) {}    // reset 执行后的钩子

对于每一种交互行为的子类，其配置项以及钩子不同，根据每种需求以及交互行为的特征自己定义。下面给出一个例子：

const Interaction = require('@antv/f2/lib/interaction/base');

const MyInteraction extends Interaction {
  getDefaultCfg() {
    return {
      startEvent: 'touchstart',
      processEvent: 'touchmove',
      endEvent: 'touchend',
      resetEvent: 'touchstart'
    }
  }
  start(ev) {}
  process(ev) {}
  end(ev) {}
  reset(ev) {}
}

注册交互行为

定义好交互行为类之后，需要注册该交互行为：

• 'my-interaction', 交互行为的名称
• MyInteraction，交互行为类

F2.Chart.registerInteraction('my-interaction', MyInteraction);

使用交互行为

chart.interaction('my-interaction', {
  startEvent: 'touchstart',
  /* ... */
});

清除交互行为

chart.clearInteraction()       // 清除 chart 实例上所有的交互行为
chart.clearInteraction('type') // 清除名称为 'type' 的交互行为