vtk鼠标不交互_AntV 交互语法之框选高亮

交互语法之框选高亮

G2 从 4.0 开始，将所有的交互行为使用全新的交互语法实现，并且不再默认内置，需要用户显式调用chart.interaction() 接口。为了帮助大家更好地理解、使用交互语法，我们将会推出交互语法专题。

本文介绍的是最常见的交互：框选，包括框选的形状、框选过程中的图形变化以及框选后的各种操作。

交互语法概览

G2 的交互语法，是将交互拆解成多个环节，每个环节由触发和反馈组成。只要你能将交互用自然语言的方式描述出来，就可以使用 G2 的交互语法进行组合搭建出交互行为。在这里我们再一起温习下 G2 交互语法中对于交互环节的定义，更详细的内容可以阅读可视化交互语法。

G2 将每一个交互环节拆解成以下步骤:

• showEnable 示能：表示交互可以进行；
• start 开始：交互开始；
• processing 持续：交互持续；
• end 结束：交互结束；
• rollback 回滚：取消交互，恢复到原始状态；

下面我们就开始框选高亮图形的交互语法组装吧，为了帮助大家理解，每个交互行为我们都会以自然语言 + 交互语法的形式向大家阐述。我们以柱状图的高亮为例，实现交互的过程中我们会使用 G2 内置的 Action，Action 的定义和列表参考 G2 配置交互。

框选中，高亮图形

交互的语言描述

1. 鼠标进入绘图区域时变成十字，鼠标离开绘图区域时恢复正常；
2. 按下鼠标，拖动鼠标开始框选，出现框选的遮罩层（mask），框选过程中被框选的图形高亮；
3. 松开鼠标按键，框选结束；
4. 双击画布，隐藏遮罩层，图形的高亮效果。

G2 交互语法

registerInteraction('element-range-highlight', {
    
  showEnable: [
    {
     trigger: 'plot:mouseenter', action: 'cursor:crosshair' },
    {
     trigger: 'plot:mouseleave', action: 'cursor:default' },
  ],
  start: [
    {
    
      trigger: 'plot:mousedown',
      action: ['rect-mask:start', 'rect-mask:show'],
    }
  ],
  processing: [
    {
    
      trigger: 'plot:mousemove',
      action: ['rect-mask:resize', 'element-range-highlight:highlight'],
    },
  ],
  end: [
    {
     trigger: 'plot:mouseup',
      action: ['rect-mask:end']
    },
  ],
  rollback: [
    {
     
      trigger: 'dblclick', 
      action: ['element-range-highlight:clear', 'rect-mask:hide'] 
    }
  ],
});

我们使用了三个 Action 来实现这个区域高亮功能：

• cursor控制鼠标样式的 Action，这个 Action 的方法支持所有的鼠标样式，例如 'pointer'、'crosshair'、'move' 等。
• rect-mask 矩形的遮罩层，这个 Action 支持的方法有：
• start：开始，表示遮罩层开始改变；
• show：显示；
• resize: 改变形状；
• hide: 隐藏；
• end: 结束。
• element-range-highlight图表元素的区域高亮，支持的方法有：
• highlight：高亮；
• clear: 清除高亮。

交互语法解释：**

• 我们使用了多个环节来组装框选高亮的交互： showEnable 意味着交互是否可以进行； start 表示交互开始进行； processing 表示交互持续进行； end 表示交互结束； rollback 表示交互回滚。这些过程不完全是顺序的，例如：框选结束后，不需要回滚就可以继续开始新的框选； showEnable 在各个环节中都生