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

一、项目概述

二、项目架构

三、几何计算难点

四、鼠标事件处理

五、数据保存与导出

六、文本处理

四、鼠标事件处理

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

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

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

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

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

原状态	动作	条件	新状态
初始状态	鼠标按下	在图元上	状态1
		在空白处	状态2
状态1	鼠标弹起		初始状态
	鼠标滑动	按下CTRL	状态3
		没有按下CTRL	状态4
状态3	鼠标滑动		保持不变
	鼠标弹起		初始状态
状态4	鼠标滑动		保持不变
	鼠标弹起		初始状态
状态2	……

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

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