基于JavaScript的在Web上绘制化学小分子的方法及系统

摘要

本发明公开了一种基于JavaScript的在Web上绘制化学小分子的方法，包括以下步骤：S11：捕捉用户在绘制界面上的分子绘制动作；S12：将捕捉到的分子绘制动作解析为绘制界面将要显示的分子图像的特征属性；S13：对绘制界面将要显示的分子图像的特征属性进行解析，基于化学合理性计算要绘制的分子图像的路径坐标与渲染风格；S14：根据得到的路径坐标和渲染风格生成页面显示所需的SVG或者VML字符串，并将分子图像显示在绘制界面上；S15：将绘制界面上显示的分子图像导出为MOL格式的文本；本发明还公开了基于JavaScript的在Web上绘制化学小分子的系统。

说明书

技术领域

本发明属于化学信息学领域，特别涉及一种基于JavaScript（Java 脚本语言）的在Web(网页)上绘制化学小分子的方法及系统。

背景技术

现有技术中，在Web应用中嵌入的绘制化学小分子的软件通常是 基于Java开发的Applet程序，这类软件体积大且速度缓慢，并需要 用户安装第三方程序。而许多国外开发的基于Javascript的轻量级Web 小分子绘制软件仅能绘制精确的及具有简单查询功能的分子结构，无 法绘制带有复杂查询功能的分子结构，功能不够完善；并且通常不能 完全兼容于旧式浏览器，例如Internet Explore 6.0，而该种型号浏 览器在我国的市场占有率达到30%。

发明内容

本发明要解决的技术问题是提供一种能够绘制带有复杂查询功能 的分子结构的在Web上绘制化学小分子的方法及系统。

为了解决上述问题，本发明提供了一种基于JavaScript的在Web 上绘制化学小分子的方法，包括以下步骤：

S11：捕捉用户在绘制界面上的分子绘制动作；

S12：将捕捉到的分子绘制动作解析为绘制界面将要显示的分子图 像的特征属性；

S13：对绘制界面将要显示的分子图像的特征属性进行解析，基于 化学合理性计算要绘制的分子图像的路径坐标与渲染风格；

S14：根据得到的路径坐标和渲染风格生成页面显示所需的SVG或 者VML字符串，并将分子图像显示在绘制界面上；

S15：将绘制界面上显示的分子图像导出为MOL格式的文本。

作为优选，对于IE浏览器，采用VML矢量标记语言显示所述绘制 界面；对于其他标准浏览器，采用SVG矢量标记语言显示所述绘制界 面。

作为优选，所述分子绘制动作包括分子结构的增加、修改、删除 和替换。

作为进一步地优选，所述步骤S12包括：对捕捉到的分子绘制动 作进行解析，并结合所述绘制界面上已有的分子图像，基于化学合理 性生成所述分子绘制动作将要在所述绘制界面上显示的分子图像的特 征属性。

作为进一步地优选，所述步骤S15包括：获取所述绘制界面上的 分子图像的所有点记录，并根据各点间的连接信息生成邻接矩阵表， 所述邻接矩阵表中的行和列分别表示分子图像中的所有点，所述邻接 矩阵表中的每个值分别代表分子图像中的两点是否相连，其中1代表 相连，0代表不相连；对所述邻接矩阵表进行深度优先遍历，根据遍历 的顺序对各个点进行排序，并设置顺序标记值；再获取各个点的坐标、 电荷、是否同位素和两点间的连接方式，导出为MOL格式的文本。

为了解决上述问题，本发明还提供了一种基于JavaScript的在Web 上绘制化学小分子的系统，包括：

用户动作捕捉模块，其构造为捕捉用户在绘制界面上的分子绘制 动作；

用户动作分析模块，其构造为将捕捉到的分子绘制动作解析为绘 制界面将要显示的分子图像的特征属性；

图像属性解析模块，其构造为对绘制界面将要显示的分子图像的 特征属性进行解析，基于化学合理性计算要绘制的分子图像的路径坐 标与渲染风格；

分子图像显示模块，其构造为根据得到的路径坐标和渲染风格生 成页面显示所需的SVG或者VML字符串，并将分子图像显示在绘制界 面上；

分子文件导出模块，其构造为将绘制界面上显示的分子图像导出 为MOL格式的文本。

作为优选，还包括：绘制界面显示模块，其构造为显示所述绘制 界面，其中，对于IE浏览器，绘制界面显示模块采用VML矢量标记语 言显示所述绘制界面；对于其他标准浏览器，绘制界面显示模块采用 SVG矢量标记语言显示所述绘制界面。

作为优选，所述分子绘制动作包括分子结构的增加、修改、删除 和替换。

作为进一步地优选，所述用户动作分析模块具体构造为：对捕捉 到的分子绘制动作进行解析，并结合所述绘制界面上已有的分子图像， 基于化学合理性生成所述分子绘制动作将要在所述绘制界面上显示的 分子图像的特征属性。

作为进一步地优选，所述分子文件导出模块包括：

第一子模块，其构造为获取所述绘制界面上的分子图像的所有点 记录，并根据各点间的连接信息生成邻接矩阵表，所述邻接矩阵表中 的行和列分别表示分子图像中的所有点，所述邻接矩阵表中的每个值 分别代表分子图像中的两点是否相连，其中1代表相连，0代表不相连；

第二子模块，其构造为对所述邻接矩阵表进行深度优先遍历，根 据遍历的顺序对各个点进行排序，并设置顺序标记值；

第三子模块，其构造为获取各个点的坐标、电荷、是否同位素和 两点间的连接方式，导出为MOL格式的文本。

与现有技术相比，本发明具有以下有益效果：

1）本发明的基于JavaScript的在Web上绘制化学小分子的方法 及系统能够快速方便地实现在Web上绘制化学小分子，并且能够绘制 带有复杂查询功能的分子结构；

2）本发明的基于JavaScript的在Web上绘制化学小分子的方法 及系统能够兼容目前所有的主流浏览器；

3）本发明的基于JavaScript的在Web上绘制化学小分子的系统 体积小，能够方便地嵌入到Web应用中，用户无需安装第三方程序。

附图说明

图1为本发明的基于JavaScript的在Web上绘制化学小分子的方 法的流程示意图。

图2为本发明的基于JavaScript的在Web上绘制化学小分子的系 统的结构框图。

具体实施方式

下面结合附图对本发明的具体实施例进行详细说明。

图1为本发明的基于JavaScript的在Web上绘制化学小分子的方 法的流程示意图。如图1所示，本发明的基于JavaScript的在Web上 绘制化学小分子的方法具体包括以下步骤：

S11：捕捉用户在绘制界面上的分子绘制动作；

在该步骤中，所述分子绘制动作的捕捉方法和绘制界面均兼容于 目前主流浏览器；对于IE系列的浏览器，绘制界面的显示使用VML （Vector Markup Language，矢量标记语言）矢量标记语言，分子绘 制动作的捕捉定位方式采用IE特有的坐标计算方式；对于其他标准浏 览器，绘制界面的显示使用SVG(Scalable Vector Graphics，可缩放 矢量图形)矢量标记语言，分子绘制动作的捕捉定位方式采用标准浏览 器的坐标计算方式；

所述分子绘制动作包括分子结构的增加、修改、删除和替换等， 例如增加、修改、删除或替换原子类型、化学键和官能团；

S12：将捕捉到的分子绘制动作解析为绘制界面将要显示的分子图 像的特征属性；

在本发明的一个实施例中，步骤S12具体包括：对捕捉到的分子 绘制动作进行解析，并结合所述绘制界面上已有的分子图像，基于化 学合理性生成所述分子绘制动作将要在所述绘制界面上显示的分子图 像的特征属性；

所述特征属性指的是绘制界面将要显示的分子图像的化学显示形 式，例如单键的长度和相对角度等；

S13：对绘制界面将要显示的分子图像的特征属性进行解析，基于 化学合理性计算要绘制的分子图像的路径坐标与渲染风格；

在该步骤中，主要解析所述绘制界面将要显示的分子图像的特征 属性，计算要绘制的分子图像的路径坐标与渲染风格；在选择某个功 能按钮时，能够在页面某处生成、修改、删除或替换一个分子结构；

例如，当“单键”功能按钮被选择后，绘制的当前功能即被绑定 为绘制单键；随着用户鼠标在绘制界面上移动，在移动过程中经过的 已经生成结构图像中所有可以连接单键的点会突出显示为一个圆点； 当用户单击以确定在某处生成单键后，该点的坐标（x,y）会被获取， 然后根据已经生成的分子结构，得到一系列的路径坐标点{（x1,y1）、 (x2,y2)、…..、{xn,yn}}，及其渲染风格，例如宽度（width），颜色 (color)等；

当“删除”功能按钮被选择后，绘制的当前功能即被绑定为删除 某个分子结构；随着用户鼠标在绘制界面上的移动，在移动过程中经 过的可以被删除的分子结构的删除控制点会突出显示；当用户鼠标单 击确定删除某个部分后（单击在键的中央控制点表示删除该键，单击 在键的连接控制点上表示删除该点连接的所有键），该点的坐标（x,y） 会被获取，然后根据该点的id信息计算要被删除的部分的DOM idl列 表（id_1,id_2,…..,id_n），并根据这些id值获取这些DOM节点，然 后从页面移除；

S14：根据得到的路径坐标和渲染风格生成页面显示所需的SVG或 者VML字符串，并将分子图像显示在绘制界面上；

在该步骤中，对于IE系列浏览器而言，VML矢量标记语言中预定 义的<shape>表示路径，<oval>表示点；对于其他标准浏览器而言，SVG 矢量标记语言中已预定义的<path>表示路径，<ellipse>表示点；对于 用户绘制分子中的分子结构部分，比如单键，双键，环、元素和查询 通配符，将路径相关的标记符<shape>/<path>以及标记M/m，L/l，C/c， Z/x，与步骤S13中计算得到的路径坐标组装成一个SVG或VML字符串， 并作为一个DOM节点增加到页面进行显示；对于用户绘制分子过程中 需要突出显示的圆点提示，使用<oval>/<ellipse>标记以及需要提示 的点的坐标（x,y）和一个固定半径值组装成一个SVG或VML字符串， 并作为一个DOM节点增加到页面进行显示；

S15：将绘制界面上显示的分子图像导出为MOL格式的文本；

在该步骤中，首先获取绘制界面上的分子图像的所有点记录，并 根据其连接信息制作成一张邻接矩阵表，邻接矩阵表中的行和列分别 表示分子图像中的所有点，而矩阵中的每个值代表图像中的两点是否 相连（1代表相连，0代表不相连）；然后对该表进行深度优先遍历， 根据遍历的顺序对各个点进行排序，并设置顺序标记值，再获取到各 个点的坐标，电荷，是否同位素和两点间的连接方式（例如单键相连、 双键相连、三键相连、R键相连或S键相连），生成符合化学信息学标 准格式MOL格式定义的文本，并在绘制界面上使用文本框进行显示； 对于分子结构中的查询结构，获取到其信息后使用json（JavaScript  Object Notation）格式的字符串{原子编号：{查询形式1：具体内容 1，查询形式2：具体内容2、…、查询形式n:具体内容n}}进行储存， 并通过接口函数返回给用户。

图2为本发明的基于JavaScript的在Web上绘制化学小分子的系 统的结构框图。如图2所示，本发明的基于JavaScript的在Web上绘 制化学小分子的系统包括绘制界面显示模块21，用户动作捕捉模块22， 用户动作分析模块23，图像属性解析模块24，分子图像显示模块25 和分子文件导出模块26，下面对各模块进行详细说明。

绘制界面显示模块21构造为显示绘制界面。对于IE浏览器，绘 制界面显示模块21采用VML矢量标记语言显示绘制界面，对于其他标 准浏览器，绘制界面显示模块21采用SVG矢量标记语言显示绘制界面， 从而使得绘制界面能够兼容于目前主流的浏览器。

用户动作捕捉模块22构造为捕捉用户在绘制界面上的分子绘制动 作。对于IE系列的浏览器，用户动作捕捉模块22采用IE特有的坐标 计算方式对分子绘制动作捕捉定位；对于其他标准浏览器，用户动作 捕捉模块22采用标准浏览器的坐标计算方式对分子绘制动作捕捉定 位。从而对分子绘制动作的捕捉定位兼容于目前主流浏览器。分子绘 制动作包括分子结构的增加、修改、删除和替换，例如增加、修改、 删除或替换原子类型、化学键和官能团。

用户动作分析模块23构造为将捕捉到的分子绘制动作解析为绘制 界面将要显示的分子图像的特征属性。

在本发明的一个实施例中，所述用户动作分析模块23具体构造为 对捕捉到的分子绘制动作进行解析，并结合所述绘制界面上已有的分 子图像，基于化学合理性生成所述分子绘制动作将要在所述绘制界面 上显示的分子图像的特征属性。

分子图像的特征属性指的是绘制界面将要显示的分子图像的化学 显示形式，例如单键的长度和相对角度等。

图像属性解析模块24构造为对绘制界面将要显示的分子图像的特 征属性进行解析，基于化学合理性计算要绘制的分子图像的路径坐标 与渲染风格。

图像属性解析模块24主要解析所述绘制界面将要显示的分子图像 的特征属性，计算要绘制的分子图像的路径坐标与渲染风格；在选择 某个功能按钮时，能够在页面某处生成、修改、删除或替换一个分子 结构。

例如，当“单键”功能按钮被选择后，绘制的当前功能即被绑定 为绘制单键；随着用户鼠标在绘制界面上移动，在移动过程中经过的 已经生成结构图像中所有可以连接单键的点会突出显示为一个圆点； 当用户单击以确定在某处生成单键后，该点的坐标（x,y）会被获取， 然后根据已经生成的分子结构，得到一系列的路径坐标点{（x1,y1）、 (x2,y2)、…..、{xn,yn}}，及其渲染风格，包括宽度（width），颜色 (color)等。

当“删除”功能按钮被选择后，绘制的当前功能即被绑定为删除 某个分子结构；随着用户鼠标在绘制界面上的移动，在移动过程中经 过的可以被删除的分子结构的删除控制点会突出显示；当用户鼠标单 击确定删除某个部分后（单击在键的中央控制点表示删除该键，单击 在键的连接控制点上表示删除该点连接的所有键），该点的坐标（x,y） 会被获取，然后根据该点的id信息计算要被删除的部分的DOM idl列 表（id_1,id_2,…..,id_n），并根据这些id值获取这些DOM节点，然 后从页面移除。

分子图像显示模块25构造为根据得到的路径坐标和渲染风格生成 页面显示所需的SVG或者VML字符串，并将分子图像显示在绘制界面 上。

对于IE系列浏览器而言，VML矢量标记语言中预定义的<shape> 表示路径，<oval>表示点；对于其他标准浏览器而言，SVG矢量标记语 言中已预定义的<path>表示路径，<ellipse>表示点。

对于用户绘制分子中的分子结构部分，比如单键，双键，环、元 素和查询通配符，分子图像显示模块25将路径相关的标记符 <shape>/<path>以及标记M/m，L/l，C/c，Z/x，与图像属性解析模块 24计算得到的路径坐标组装成一个SVG或VML字符串，并作为一个DOM 节点增加到页面进行显示；对于用户绘制分子过程中需要突出显示的 圆点提示，分子图像显示模块25使用<oval>/<ellipse>标记以及需要 提示的点的坐标（x,y）和一个固定半径值组装成一个SVG或VML字符 串，并作为一个DOM节点增加到页面进行显示。

分子文件导出模块26构造为将绘制界面上显示的分子图像导出为 MOL格式的文本。

在本发明的一个实施例中，分子文件导出模块26包括：

第一子模块，其构造为获取绘制界面上的分子图像的所有点记录， 并根据其连接信息制作成一张邻接矩阵表，邻接矩阵表中的行和列分 别表示分子图像中的所有点，而矩阵中的每个值代表图像中的两点是 否相连（1代表相连，0代表不相连）；

第二子模块，其构造为对该表进行深度优先遍历，根据遍历的顺 序对各个点进行排序，并设置顺序标记值；

第三子模块，其构造为获取到各个点的坐标，电荷，是否同位素 和两点间的连接方式（例如单键相连、双键相连、三键相连、R键相连 或S键相连），生成符合化学信息学标准格式MOL格式定义的文本，并 在绘制界面上使用文本框进行显示。

对于分子结构中的查询结构，获取到其信息后使用json （JavaScript Object Notation）格式的字符串{原子编号：{查询形 式1：具体内容1，查询形式2：具体内容2、…、查询形式n:具体内 容n}}进行储存，并通过接口函数返回给用户。

以上实施例仅为本发明的示例性实施例，不用于限制本发明，本 发明的保护范围由权利要求书限定。本领域技术人员可以在本发明的 实质和保护范围内，对本发明做出各种修改或等同替换，这种修改或 等同替换也应视为落在本发明的保护范围内。