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

一、项目概述

二、项目架构

三、几何计算难点

四、鼠标事件处理

五、数据保存与导出

六、文本处理

四、鼠标事件处理

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

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

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

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

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

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

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

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

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

在线流程图和思维导图开发技术详解（三）
一.项目概述二.项目架构三.几何计算难点四.鼠标事件处理五.数据保存与导出六.文本处理三.几何计算难点 3.1 矩形变换我们先来看没有旋转的情况.不旋转的情况是比较简单的,只是情况比较多 ...
在线流程图和思维导图开发技术详解（二）
一.项目概述二.项目架构三.几何计算难点四.鼠标事件处理五.数据保存与导出六.文本处理二.项目架构 2.1 系统架构项目系统架构如下图所示: UI元素即HTML DOM元素.项目打开时, ...
在线流程图和思维导图开发技术详解（五）
一.项目概述二.项目架构三.几何计算难点四.鼠标事件处理五.数据保存与导出六.文本处理五.数据保存与导出 5.1 数据保存一张流程图,实际是一个图元列表,也就是Array<Comp ...
在线流程图和思维导图开发技术详解（六）
一.项目概述二.项目架构三.几何计算难点四.鼠标事件处理五.数据保存与导出六.文本处理六.文本处理 6.1 两种富文本展示方式本项目显示的文本皆是富文本,也就是在一个框里面,文本有多种样 ...
推荐一个在线创作流程图、思维导图软件—ProcessOn
转载自推荐一个在线创作流程图.思维导图软件-ProcessOn 最近要画流程图,破解了半天Visio2016没搞定,2016的估计都被封了,Visio收费又过贵,又不想折腾低版本的破解,所以找了个在 ...
推荐一个在线绘图工具ProcessOn----支持流程图、思维导图、UML等
我们常用来绘制流程图等的工具一版会使用visio等,但是它是一款收费软件,而且不是太易用,今天推荐一款在线绘图工具ProcessOn,不仅功能强大,而且快捷易用,还有大量优秀的模板可供使用. 邀请连接 ...
免费在线作图，思维导图，流程图，实时协作
www.processon.com 免费在线作图,思维导图,流程图,实时协作
流程图、思维导图、网络拓扑图、组织结构图——ProcessOn在线工具及增加文件数方法
可网页在线画流程图之类的,还有模版可以参考. ProcessOn 支持流程图.思维导图.原型图.UML.网络拓扑图.组织结构图等 ProcessOn在线工具: https://www.processo ...
confluence 制作流程图_「每周开方」高效制作流程图、思维导图
提升工作效率,并且可以自成一套职场PPT的导图.流程图! 这周的「每周开方」公子要分享强大的"思维导图"及"流程图"制作网站!在职场中导图的重要性应该不需要公子 ...

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

四、鼠标事件处理

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

最新文章

热门文章