h5汽车图片标注鼠标经过提示_学用系列｜尝鲜基于H5技术的交互式科学公示编辑器—

简介：

Boom Docs是基于H5的一款所见即所得的交互式科技公式编辑工具。采用了极简的操作界面，摒弃了常见的编辑工具所采用的菜单和复杂的工具条的设计。目的是让使用者把所有的注意力都集中在录入的内容上，而不是忙于应付复杂的界面操作，让使用者甚至感受不到工具的存在。

操作界面：

为了防止使用者感到不适应，Boom Docs保留了部分常用的工具。工具条的内容会根据焦点对象而改变。工具条分为：文档、公式、化学、几何四个部分。

文档工具：从左到右依次为：粗体、斜体、下划线、阴影 | 左对齐、中对齐、右对齐 | 插入数学公式、插入几何图形块、插入化学块 | 文档设置。

数学工具：数学工具非常简单，凑数般的存在。从左到右依次为：插入上标、插入下标，中间区域为插入希腊字符，最后一个是把该公式生成图片。输入数学公式不依赖这些工具，后面我们会重点介绍。

化学工具：化学工具同数学公式工具差不多，输入都不依赖这些工具。从左到右依次为：单键、双键、三键 | 碳元素、氧元素、氮元素 | 在任意位置插入文字、在基线位置插入文字 | 基线下移、基线上移 | 生成图片。

基本操作：

Boom Docs采用了以键盘为主的操作方式，不同于其他编辑工具所采用的单一功能的快捷键的方式，Boom Docs采用的功能键都是键盘上最常用、操作最方便的键。由 shift、ctrl、alt 键，加上方向键(箭头键)、空格键、回车键的组合方式，完成各种操作。而且数量也不多，基本上不需要去特别记忆它。

在数学公式中，主要用到的就是 ctrl + ↑ ↓ 方向键来快速插入上标和下标。

焦点在化学块中，主要用到的就是 ctrl + 方向键来快速创建化学键或更改化学键类型，方向键来进行焦点的控制。shift + 方向键是旋转，alt + 方向键是移动。回车键主要是用来确认，更改化学键的类型等。

焦点在几何块中，操作也是差不多的，选中图形后通过方向键来进行移动。shift + 方向键是旋转，ctrl + 方向键是调整几何图形的属性。

Boom Tool：

Boom Tool是一个智能可搜索的工具，是Boom Docs的主要操作方式，精髓所在。分为数学、几何、化学三部分，在这三种块内，要进行任何操作，只需要按一下最大、最好按的一个键(空格键)，把Boom Tool呼出来后就都可以完成。工具会根据上下文智能的给出一些最可能用到的命令或者操作，也可以输入关键字进行搜索。

数学公式中，如下图所示，使用者想输入希腊字符 β，按空格键后，Boom Tool会给出一些默认的提示。使用者发现没有想要的结果后，通过输入 β 字符的关键字 "beta"，就能精确的找到该字符，然后再按相应的数字键就能插入该希腊字符。不需要通过复杂的菜单或者工具条去翻找该字符，就像输入汉字一样简单。速度快，不影响思路。

化学式主要是通过Boom Tool配合 ctrl + 方向键的操作，迅速的构建出复杂的结构式。Boom工具会根据当前要连接的状态，推荐相应的结构，并给出连接的方向，让你很直观的看见下一步操作的结果。构建一个结构式的大致步骤如下图所示，亲自体验一下，马上就能掌握它。

几何的Boom Tool相对简单些，主要为快速构建一些特定的图形，比如各钟多边形和各种立体图形等。修改选中图形的属性或者添加一些控制点等。

使用技巧：

熟练的操作配合一些技巧，能让你快速的完成想要的公式，会有再也不想用笔的想法。编辑器有一些手写笔不具有的优势：比如内容相同的可以通过拷贝粘贴快速完成；公式的排版是自动的，不用预先判断一些诸如分数线、根号等的长度和位置；生成的公式美观、标准、一致，不会出现手写字符不一致、容易认错的情况；

由于数学公式的运算符、符号等数量非常大。为了加快Boom Tool的搜索速度，有些运算符号的查找不需要用拼音等关键字，比如等号类的符号，可以通过输入“=”来进行查找。

要灵活利用Boom Tool的历史功能，前面输入的符号，在Boom Tool再次启动时会显示在后面。

Boom Tool不仅仅是能插入符号，还可以输入操作命令(区别于符号，采用红色显示)。如下图的矩阵内容创建，一个一个字符的书写要花费很长时间，用矩阵的特殊命令可以飞快心情愉悦的完成。先创建一个4X4的矩阵，然后在第一个单元格内输入内容，把变量下标空着不填，然后用矩阵填充命令(红箭头所示)，最后仅需补齐变量部分即可。

在有机化学结构式中，碳元素默认是不显示的，其他元素可以通过选中化学键的一端，在键盘上直接敲化学元素的字母，然后按回车确认即可。比如氮元素 N，直接输入字母N后直接回车，元素后面所带的氢元素H会自动根据N元素的价态和所连接的化学键的键值自动计算。选中N元素后可以通过ctrl + "+ -"键调整N元素的价态。

通过ctrl + 方向键创建的化学键默认是单键，如果想要改成其他类型的键也非常简单。在该键选中的情况下，直接按回车 Enter 键(常用键数量少)或者 ctrl+ ↑ ↓ 方向键(全部形态)进行调整。双键的位置和形态是自动计算的，不用特殊指定。其他带有方向的键可以通过 shift + ↑ ↓ 方向键进行调整。

化学结构式中的各种基团，可以通过两种方式生成。第一种是比较快速的，通过搜索Boom Tool内置的常用的基团，然后插入。对于Boom Tool找不到的基团，可以同输入元素的方法一样，通过键盘直接输入的方式直接输入，按回车确认。输入过程中，数字会自动根据情况变成下标。也可以用方向键进行光标走位，↑ 键是输入上标位置，↓ 键是输入下标位置。基团的显示会根据化学键的方向自动进行镜像。

几何图形的绘制，主要采用鼠标为主的操作方式。根据每个图形自己的特点，我们采用鼠标图标提示的方式，来引导使用者如何操作。每步鼠标点击后都会提示图形的下一个控制点，直到图形完成。Boom Docs的几何图形画法，并不像其它软件画图形那样图形是固定的，然后通过控制选中的控制手柄进行缩放、拉伸等操作。Boom Docs的几何图形画法是相对精确并符合该图形的数学规则的。

如下图中双曲线的画法，共分为三个步骤。每一步鼠标都会做出提示。第一步是选中双曲线的中心点，鼠标点击后来到第二步，鼠标提示选择双曲线的焦点，点击后第三步提示选择双曲线的顶点。三步后双曲线就画好了，期间会有角度和捕捉状态的提示。

有些图形有两种不同的画法，以达到快速匹配的目的。比如圆形，如果想用某一个点作为圆心，画完圆再去移动找圆心，很难找准。或者以某条直线作为直径画一个圆，同样也很难找准。Boom Docs用两种不同的画法解决了这些问题，在画圆工具下，按住 ctrl 键就是以圆心画法，默认是直径画法。正弦余弦同样也有同样两种画法。