交互过程中的辅助图形

简介

传统的图表的交互都是通过触发鼠标的事件来完成，但是一个交互有多个环节，每个环节需要不同的反馈时，仅仅鼠标的触发就捉襟见肘，需要增加一些辅助的图形来让交互得以顺利完成，

辅助图形

交互过程中的辅助图形常用于完成以下功能：

• 显示交互正在进行
• 提供新的触发方式

以两个示例来说明这两种功能：

• 以框选图形为例，框选过程中出现 mask（显示交互的进行），框选完毕后可以继续拖拽 mask（提供新的触发方式）继续对图形进行选中
• 以拖拽画布改变坐标轴的范围 scale 为例，拖拽画布时坐标轴刻度调整，同时出现 reset 按钮（增加新的触发方式），点击按钮回滚。

辅助图形的类型

我们梳理了图表中的所有交互发现交互过程中需要下面各种辅助图形：

• mask ：遮罩层，在画布、组件上进行框选时使用
• delegation: 委托对象，拖拽 View、Element、Component 或者列表项时使用
• button: 按钮，提供新的触发形式，也是用于回滚替代 dblclick 等事件的方式
• icon：图标，显示交互可以进行，同时提供新的触发方式，例如，当鼠标移动到 Element 时，出现可以拖拽的 icon，拖拽 icon Element 跟随移动；鼠标移动到坐标轴的 title 上显示可以排序的 icon
• breadcrumb: 面包屑，表示交互的路径

Mask

Delegation

Button

icon

breadcrumb

辅助图形交互的实现

总结