交互行为

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

一系列基础的事件组成一种具体的交互行为,同时交互行为也可提供配置化的反馈(结果)。在我们交互机制中,每一个交互行为包括三个环节:

  • 触发,对应一种触发事件
  • 持续,对应一种持续事件
  • 结束,对应一种结束事件
    举个例子,tooltip 的交互行为,就是从 touchstart 开始触发,touchmove 时 tooltip 持续展示并更新,touchend 时 tooltip 消失,此交互行为结束。

自定义交互

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

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

Interaction 基类

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

  1. // 引入 Interaction 基类
  2. constInteraction=require('@antv/f2/lib/interaction/base');

Interaction 基类类图image.png | left | 373x292.53258426966295

支持的事件

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

公有属性

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

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

公有方法

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

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

对于每一种交互行为的子类,其配置项以及钩子不同,根据每种需求以及交互行为的特征自己定义。

例子

  1. constInteraction=require('@antv/f2/lib/interaction/base');
  2.  
  3. constMyInteractionextendsInteraction{
  4. getDefaultCfg(){
  5. return{
  6. startEvent:'touchstart',
  7. processEvent:'touchmove',
  8. endEvent:'touchend',
  9. resetEvent:'touchstart'
  10. }
  11. }
  12. start(ev){}
  13. process(ev){}
  14. end(ev){}
  15. reset(ev){}
  16. }

更多可参考 pie-select 交互行为类的实现。

注册交互行为

定义好交互行为类之后,需要注册该交互行为:

  • 'my-interaction', 交互行为的名称
  • MyInteraction,交互行为类
  1. F2.Chart.registerInteraction('my-interaction',MyInteraction);

使用交互行为

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

清除交互行为

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

自定义 Animate Plugin 插件机制

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/custom-interaction.html