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

Abstract

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

Description

基于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 ObjectNotation）格式的字符串{原子编号：{查询形式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 ObjectNotation）格式的字符串{原子编号：{查询形式1：具体内容1，查询形式2：具体内容2、…、查询形式n:具体内容n}}进行储存，并通过接口函数返回给用户。

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

Claims (10)

1.一种基于JavaScript的在Web上绘制化学小分子的方法，其特征在于，包括以下步骤：

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

S12：将捕捉到的分子绘制动作解析为绘制界面将要显示的分子图像的特征属性，所述特征属性是绘制界面将要显示的分子图像的化学显示形式；

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

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

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

2.根据权利要求1所述的基于JavaScript的在Web上绘制化学小分子的方法，其特征在于，对于IE浏览器，采用VML矢量标记语言显示所述绘制界面；对于其他标准浏览器，采用SVG矢量标记语言显示所述绘制界面。

3.根据权利要求1所述的基于JavaScript的在Web上绘制化学小分子的方法，其特征在于，所述分子绘制动作包括分子结构的增加、修改、删除和替换。

4.根据权利要求1至3中任一项所述的基于JavaScript的在Web上绘制化学小分子的方法，其特征在于，所述步骤S12包括：

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

5.根据权利要求1至3中任一项所述的基于JavaScript的在Web上绘制化学小分子的方法，其特征在于，所述步骤S15包括：

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

对所述邻接矩阵表进行深度优先遍历，根据遍历的顺序对各个点进行排序，并设置顺序标记值；

再获取各个点的坐标、电荷、是否同位素和两点间的连接方式，导出为MOL格式的文本。

6.一种基于JavaScript的在Web上绘制化学小分子的系统，其特征在于，包括：

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

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

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

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

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

7.根据权利要求6所述的系统，其特征在于，还包括：

绘制界面显示模块，其构造为显示所述绘制界面，

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

8.根据权利要求6所述的系统，其特征在于，所述分子绘制动作包括分子结构的增加、修改、删除和替换。

9.根据权利要求6至8中任一项所述的系统，其特征在于，所述用户动作分析模块具体构造为：对捕捉到的分子绘制动作进行解析，并结合所述绘制界面上已有的分子图像，基于化学合理性生成所述分子绘制动作将要在所述绘制界面上显示的分子图像的特征属性。

10.根据权利要求6至8中任一项所述的系统，其特征在于，所述分子文件导出模块包括：

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

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

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