![c1e12cfa3ab839d4cb6c939a16b5eff0.png](https://i-blog.csdnimg.cn/blog_migrate/2eaedcd608333504970f3761608a68e0.jpeg)
交互语法之框选高亮
G2 从 4.0 开始,将所有的交互行为使用全新的交互语法实现,并且不再默认内置,需要用户显式调用chart.interaction()
接口。为了帮助大家更好地理解、使用交互语法,我们将会推出交互语法专题。
本文介绍的是最常见的交互:框选,包括框选的形状、框选过程中的图形变化以及框选后的各种操作。
![da96a242d1df8490802a4bacecdf6ec1.gif](https://i-blog.csdnimg.cn/blog_migrate/05e63293af1960137ebe4656b242b821.gif)
交互语法概览
G2 的交互语法,是将交互拆解成多个环节,每个环节由触发和反馈组成。只要你能将交互用自然语言的方式描述出来,就可以使用 G2 的交互语法进行组合搭建出交互行为。在这里我们再一起温习下 G2 交互语法中对于交互环节的定义,更详细的内容可以阅读可视化交互语法。
G2 将每一个交互环节拆解成以下步骤:
- showEnable 示能:表示交互可以进行;
- start 开始:交互开始;
- processing 持续:交互持续;
- end 结束:交互结束;
- rollback 回滚:取消交互,恢复到原始状态;
下面我们就开始框选高亮图形的交互语法组装吧,为了帮助大家理解,每个交互行为我们都会以自然语言 + 交互语法的形式向大家阐述。我们以柱状图的高亮为例,实现交互的过程中我们会使用 G2 内置的 Action,Action 的定义和列表参考 G2 配置交互。
框选中,高亮图形
![dd1465a2bbf07ff93a35ac730f7e26d7.gif](https://i-blog.csdnimg.cn/blog_migrate/40019885eba5d08b112e42781197fd8d.gif)
![43cea2227327134d6406a48650639145.gif](https://i-blog.csdnimg.cn/blog_migrate/d887e74db6358e81fb64a79994e28ce5.gif)
交互的语言描述
- 鼠标进入绘图区域时变成十字,鼠标离开绘图区域时恢复正常;
- 按下鼠标,拖动鼠标开始框选,出现框选的遮罩层(mask),框选过程中被框选的图形高亮;
- 松开鼠标按键,框选结束;
- 双击画布,隐藏遮罩层,图形的高亮效果。
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
在各个环节中都生