CN110968944B - 在Web前端展示并操作CAD图纸的方法 - Google Patents

Abstract

本发明公开了一种在Web前端展示并操作CAD图纸的方法，服务器端将CAD图纸文件封装成约定的数据交换格式，并发给提出请求的Web前端；Web前端将数据交换格式转换成SVG文件；Web前端调用操作命令对展示在Web前端的SVG图元进行操作，Web前端根据操作命令修改展示的SVG图元；Web前端记录所述操作命令或存放修改后的SVG文件；将所述操作命令或SVG文件封装为所述数据交换格式回传给服务器端；服务器端解析所述数据交换格式，转换成CAD图纸或根据操作命令适配的操作指令修改CAD图纸。依据本发明的方法能够在Web展示并进行修改。

Description

在Web前端展示并操作CAD图纸的方法

技术领域

本发明涉及一种在Web前端展示并操作CAD图纸的方法。

背景技术

在网络节点的服务器端与Web前端（终端）间，或者终端之间，以CAD（ComputerAided Design，计算机辅助设计）图纸为对象的展示、操作多需给定的插件作支持，当前，对于CAD无插件支持的Web前端展示多以Canvas对象展示。Canvas即画布，是HTML5首次增加的标签，主要用于网页实时生成图像，并且可以操作图像内容，理论上Canvas可构成一个能够用JavaScript操作的bitmap（位图）。

对于位图而言，其不能实现对所展示的图纸进行不失真的缩放查看。此外，对于Canvas而言，其对CAD对象只能展示，而不能在Web端进行修改，尤其是，Canvas只能展示CAD的图元，而不能根据图纸展示更多图纸隐藏的相关信息。

典型地，中国专利文献CN109410346A公开了一种在线编辑三维建筑模型的方法，其在可编辑区域采用H5（即HTML5）的Canvas技术，主要使用Canvas对CAD图的基本单元进行渲染，而不能对CAD图元进行修改。

中国专利文献CN107368622A公开了一种CAD图纸在线浏览的方法，其将CAD图纸直接复制到Flash元件（影片剪辑）内，借助于Flash软件的动作脚本程序对CAD图纸进行矢量放大，并用鼠标或触摸屏拖动图纸的变化尺寸，即预先确定矢量放大的范围。然后制作成SWF文件，将该SWF文件以浏览器插件的形式安装在浏览器上，从而可以通过浏览器插件查看CAD图纸。该种方法一方面需要插件支持，使用便捷性不佳。另外，其所谓的矢量放大也只是伪矢量放大，受原始制作所确定放大范围的限制。

同样地，中国专利文献CN103678807A公开了一种基于内置网页浏览器的三维可视化方式，其依赖于在HTML文件中嵌入各厂家图纸浏览控件，实现对不同CAD格式图纸的浏览。可以预见的是，各厂家图纸浏览控件集成到浏览器上很不现实，单一厂家的浏览器控件从几十Mb到几百Mb，浏览器难以嵌入更多的此类控件，换言之，其根本无法实现。

从前述的内容可见，对于CAD图纸，在Web前端能够实现的多是浏览，或者说简单的展示，对CAD图纸的操作仅限于图纸的简单矢量放大，而不能对CAD图纸进行修改。

发明内容

本发明的目的在于提供一种能够在Web展示并进行修改的在Web前端展示并操作CAD图纸的方法。

在本发明的实施例中，提供一种在Web前端展示并操作CAD图纸的方法，将针对展示在Web前端的CAD图纸的操作命令封装为与CAD图纸操作的指令一一对应；所述方法包括以下步骤：

Web前端提出请求；

服务器端响应所述请求，提取CAD图纸文件，并将该CAD图纸文件封装成约定的数据交换格式，并发给提出请求的Web前端；

Web前端将获得的数据交换格式转换成SVG文件；

Web前端调用操作命令对展示在Web前端的SVG图元进行操作，Web前端根据操作命令修改展示的SVG图元；Web前端记录所述操作命令或存放修改后的SVG文件；

将所述操作命令或SVG文件封装为所述数据交换格式回传给服务器端；

服务器端解析所述数据交换格式，转换成CAD图纸或根据操作命令适配的操作指令修改CAD图纸。

可选地，服务器端所封装的CAD图纸数据为CAD图纸的所有CAD图元和CAD图元的属性值。

可选地，数据交换格式为Json数据格式。

可选地，所述属性值包括CAD图元的坐标值，在Web前端，首先根据所述坐标值适配SVG坐标值及SVG图元重建图纸。

可选地，所述操作命令与CAD的操作指令相适配，并以按钮的形式展示在Web前端，该按钮响应鼠标操作，而实现与CAD操作指令相同的操作。

可选地，将针对当前SVG图元的操作命令绑定，用于展示在Web前端的SVG图元的操作，并在回传给服务器段时用于后台CAD图纸中图元的修改。

可选地，对SVG图元的操作包括新增SVG图元；

在Web前端展示的SVG图元与后台存放的CAD图纸的图元数据绑定；

当在Web前端新增SVG图元时，在后台实时修改后台数据，并将修改后的后台数据与该新增的SVG图元绑定。

可选地，Web前端展示的SVG图元与后台存放的CAD图纸的凸缘数据间的绑定为通过CAD图纸ID的绑定。

在本发明的实施例中，通过数据交换格式用于前台与后台间不同数据格式间的转换，将后台（服务器端）存放的CAD图纸转换为前台能够处理的SVG文件，SVG是ScalableVector Graphics的缩略语，即可缩放矢量图形，其本身为矢量图形，而能够在前台（Web前端）进行SVG图元的缩放，矢量图不因缩放而影响清晰度，这是矢量图的固有属性。SVG是Web的联盟标准，并严格遵从XML语法，即所有浏览器均支持SVG，因此，在本发明的实施例中，不必提供专门的插件即可实现将CAD图纸展示在Web前台。SVG与Java可一起运行，具有交互性和动态性，完全支持DOM（Document Object Model，文档对象模型），对SVG图元可以进行包括新增、删除、修改在内的操作。进而，当前台对SVG图元进行修改保存后，可以再封装回传给后台，对保存在后台的CAD图纸完成修改。

附图说明

图1为本发明的实施例中在WEB前端展示并操作CAD图纸的方法的原理流程示意图。

图2为本发明的实施例中在WEB前端展示并操作CAD图纸的方法的流程示意图。

具体实施方式

在本发明的实施例中，依赖于Web（万维网）的两个基本构件，其一是SVG，另一是JavaScript下的Json，前者在前文中已经较为详细的描述，其是Web联盟标准，属于本领域的常识，在此不再赘述。对于后者，即Json，是JavaScript Object Notation的缩略语，中文正常表述为JavaScript 对象简谱或JS对象简谱，是一种轻量级的数据交换格式，Json基于ECMAScript（欧洲计算机协会指定的JS规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

Json是一种轻量级的数据交换格式，据此可知，本领域的技术人员还可以采用其他类型的数据交换格式，以用于不同类型数据间的转换。这是本领域的常识，在本发明所记载内容的基础上，不同的实体可以根据本公司的技术环境进行不同的配置。

相对而言，Json不仅可使用高级语言解析，同时也易于进行机器解析，因此，其应用相对比较广泛。

此外，Json是JavaScript下的一个子集，而JavaScript是浏览器的固有配置，在本发明优选的实施例中，使用JavaScript进行封装和解析效率更高，产生bug的概率也最低。

CAD图纸格式虽多种多样，但以AutoCAD所生成的dwg格式为主，其他CAD软件都能够生成的dwg格式 。

SVG相对而言，主要仅支持2D（二维）图纸的操作，因此，在本发明的实施例中Web前端能够进行操作的CAD图纸为2D图纸。

一般而言，用户端，或者说Web前端，也称前台，向服务器端发出链接请求，链接到相关服务器，查找到相关CAD图纸，并试图打开，如同在本地打开一样，对CAD图纸的操作，实际是基于Web的操作。

在本发明的实施例中，将针对展示在Web前端的CAD图纸的操作命令封装为与CAD图纸操作的指令一一对应。需要说明的是，Web前端所执行的操作命令相对于CAD空间而言，所需要的操作命令相对较少，并且显而易见的是，对于Web前端而言，往往并不需要非常复杂的操作，尤其是，服务器开放给Web前端的权限往往非常少，在更多的应用中表现为简单的缩放、移动。因此，在后续的内容中涉及到前台操作命令按钮设置的问题，可以理解的是，提供给前台的操作命令不会太多，相应的按钮数量相对有限，对网页的整体布局影响较小。

若服务器为公司内部服务器，则对于某些终端可以开放较高的权限，例如可以对CAD图纸进行修改。

进一步地，Web前端向服务器提出请求，服务器可以先确定接入的Web前端的权限，根据Web前端的权限确定可向其开放的服务。

服务器根据用户端请求，提取相应的CAD图纸文件，并基于JavaScript解析该CAD图纸文件，分析出CAD图纸文中包含的所有 CAD对象及其属性值。

服务器端对CAD文件解析完成后将所有对象数据封装成Json数据，生成Json文件，然后发送给提出请求的Web前端，即用户端。

用户端采用Javascript脚本解析出所述Json数据中的所述所有CAD对象及其属性值，并将所述CAD对象的坐标转换为本地SVG对象的坐标，在SVG空间中绘制出CAD图纸，即在SVG空间中重建CAD图纸，表示为SVG图纸。

对于SVG而言，如前所述，其空间本身属于矢量空间，所对应的图纸为矢量图纸，因此，其缩放并不影响图像质量。

进而，使用Javascript脚本封装放大缩小SVG图纸的方法，可以理解的是，SVG有具体的手册，本领域的技术人员可以调阅其手册，手册中定义了各种图纸元素，这些图纸元素包含了SVG图纸图元的各种元素，JavaScript可以直接封装SVG中的图纸元素，以适配不同权限的用户。

进而，基于封装SVG图元而确定的操作命令，可以实现例如滑动鼠标滚轮不失真的放大缩小整个图象，实现全局查看图像或者查看图象细节。

对于低权限用户，可以查看而不能进行任何操作，对于中权限用户可以开放SVG图元的缩放查看，而对于高权限的用户，对SVG图元的操作可以包含更多的操作，例如SVG图元的拖拽移动、删除、替换、增加、修改。将生成的SVG图元操作命令与CAD图元操作命令绑定。

基于前述的内容可知，JavaScript可以对SVG空间进行定义，在优选的实施例中，在SVG空间自定义工具栏，参考CAD图纸的基本操作，基于用户权限，给定相应的工具栏。

Javascript脚本根据CAD图纸的Json数据生成各类型图元，实现在工具栏拖拽图元到上述生成的SVG空间内的SVG图纸中，以实现新增图元的功能。

前述的内容可以先在Web前端实现对CAD图纸的操作功能。进而设置导出按钮，使用Javascript脚本解析当前显示的SVG图象生成新的Json文件数据。

对于Json文件数据回传给后台，即服务器端，服务器端对存放的相应的CAD图纸进行修改。

在一些实施例中，针对服务器端所存放CAD图纸可以实时进行，可以理解的是，服务器端与客户端通常属于交互链接。

在一些实施例中，针对图纸修改的操作在前台展示为对前台SVG图纸的修改，同时存储操作命令，生成操作命令流。在前台保存SVG图纸时，操作命令流被回传给后台，后台对接收到的操作命令流转换为操作指令流，完成对所存放的CAD图纸的修改。

在一些实施例中，将所绘制的SVG图元的ID，绑定到后台数据（由数据库数据存放），以显示更多原CAD图象的隐藏信息。

关于ID的绑定，还可以是前台数据与后台数据间的绑定，ID表现为后台数据的ID。

基于前述的内容可知，基于本发明的实施例：

无需在前端用户端安装CAD插件，便能实现CAD图纸的无失真展示，图纸展示流畅。

因采用Javascript语言在SVG控件中绘制图纸和监听事件，可兼容目前所有主流的浏览器。

只要支持浏览器的操作平台和***都能展示CAD图纸，实现跨平台、跨***展示CAD图纸，兼容性好，一次开发运行所有平台，易于开发、推广。

Claims (6)

1.一种在Web前端展示并操作CAD图纸的方法，其特征在于，将针对展示在Web前端的CAD图纸的操作命令封装为与CAD图纸操作的指令一一对应；所述方法包括以下步骤：

Web前端提出请求；

服务器端响应所述请求，提取CAD图纸文件，并将该CAD图纸文件封装成约定的数据交换格式，并发给提出请求的Web前端；

Web前端将获得的数据交换格式转换成SVG文件；

Web前端调用操作命令对展示在Web前端的SVG图元进行操作，Web前端根据操作命令修改展示的SVG图元；Web前端记录所述操作命令或存放修改后的SVG文件；

将所述操作命令或SVG文件封装为所述数据交换格式回传给服务器端；

服务器端解析所述数据交换格式，转换成CAD图纸或根据操作命令适配的操作指令修改CAD图纸；

服务器端所封装的CAD图纸数据为CAD图纸的所有CAD图元和CAD图元的属性值；

将针对当前SVG图元的操作命令绑定，用于展示在Web前端的SVG图元的操作，并在回传给服务器段时用于后台CAD图纸中图元的修改。

2.根据权利要求1所述的方法，其特征在于，数据交换格式为Json数据格式。

3.根据权利要求1所述的方法，其特征在于，所述属性值包括CAD图元的坐标值，在Web前端，首先根据所述坐标值适配SVG坐标值及SVG图元重建图纸。

4.根据权利要求1所述的方法，其特征在于，所述操作命令与CAD的操作指令相适配，并以按钮的形式展示在Web前端，该按钮响应鼠标操作，而实现与CAD操作指令相同的操作。

5.根据权利要求1所述的方法，其特征在于，对SVG图元的操作包括新增SVG图元；

在Web前端展示的SVG图元与后台存放的CAD图纸的图元数据绑定；

当在Web前端新增SVG图元时，在后台实时修改后台数据，并将修改后的后台数据与该新增的SVG图元绑定。

6.根据权利要求5所述的方法，其特征在于，Web前端展示的SVG图元与后台存放的CAD图纸的图元数据间的绑定为通过CAD图纸ID的绑定。