在线流程图和思维导图开发技术详解（四）

在线流程图和思维导图开发技术详解（四）"/>

在线流程图和思维导图开发技术详解（四）

一、项目概述

二、项目架构

三、几何计算难点

四、鼠标事件处理

五、数据保存与导出

六、文本处理

四、鼠标事件处理

在所有处理器中，鼠标事件处理器是最为复杂的，因为在整个页面中，基本可以使用鼠标完成所有功能。最常见的鼠标动作有三个，分别是左键按下、滑动、左键弹起。有些场合还需要用到双击和右键两个动作，例如双击编辑文字，右击取消添加。除此之外，鼠标的动作还需要配置辅助键，例如CTRL和SHIFT，在拖动图元变换时会用到这两个键。

一次鼠标点击，包括了按顺序执行的按下、滑动和弹起三个动作，这中间的情况相当多，以下是其中一部分：

当鼠标按下时，我们需要判断按下的地方是在图元上（实际上还要分是否选中、是否锁定等情况）还是在空白的地方。若是，接下来，我们要看鼠标的动作是滑动还是弹起。若是弹起，一个点击事件就完成了。若是滑动，一般就会引发图元变换的过程。而这一过程需要判断是否按下了CTRL键或SHIFT键，它们会触发不同的动作。最后鼠标弹起，完成一次事件。

可以看到，对于上面的动作，如果不断使用if/else去处理，这个代码层次将会非常多和冗长，难以管理。

可以使用状态机的方法去解决这一问题。例如，对于上述动作，可以列出如下的表格：

可以看到，利用状态机的方法，代码只会有两层。每个动作之后，只需要对当前动作作出处理（例如改变光标、记录当前位置等），然后改变状态即可。下面列出一段示例伪代码：

switch 当前状态case 初始状态if 动作=按下if 在图元上作出处理当前状态=状态1if 在空白处作出处理当前状态=状态2case 状态1if 动作=弹起作出处理当前状态=初始状态if 动作=滑动if CTRL作出处理当前状态=状态3if !CTRL作出处理当前状态=状态4case 状态3……