本發(fā)明涉及一種web前端展示cad圖紙技術(shù)，尤其是涉及一種在web前端無(wú)插件展示cad圖紙的方法及裝置。

背景技術(shù)：

目前在web前端展示cad圖紙的基本做法是安裝cad插件，瀏覽器從服務(wù)器下載cad圖紙并加載插件展示。該種cad圖紙展示方式存在以下兩個(gè)缺點(diǎn)：

1、由于目前瀏覽器種類(lèi)繁多，瀏覽器提供的接口各有不同，因此cad插件的兼容性難以保證，很難做到兼容所有瀏覽器。

2、由于目前存在不同的操作系統(tǒng)、各式各樣的平臺(tái)，采用插件的方式無(wú)法兼容所有平臺(tái)和系統(tǒng)。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于克服現(xiàn)有技術(shù)的web前端需要安裝cad插件、無(wú)法兼容所有瀏覽器、操作平臺(tái)和系統(tǒng)等缺陷，提供一種在web前端無(wú)插件展示cad圖紙的方法及裝置。

為實(shí)現(xiàn)上述目的，本發(fā)明提出如下技術(shù)方案：一種在web前端無(wú)插件展示cad圖紙的方法，包括：

服務(wù)器將客戶(hù)端請(qǐng)求的cad圖紙文件讀出并解析，分析出cad圖紙中包含的所有cad對(duì)象及其屬性值，解析完成后將所有對(duì)象數(shù)據(jù)封裝成json數(shù)據(jù)/xml數(shù)據(jù)格式發(fā)送給客戶(hù)端；

客戶(hù)端采用javascript腳本解析出所述json數(shù)據(jù)/xml數(shù)據(jù)中的所述所 有cad對(duì)象及其屬性值，并將所述cad對(duì)象的坐標(biāo)轉(zhuǎn)換為本地canvas控件的坐標(biāo)，在canvas控件中繪制出cad圖紙。

優(yōu)選地，所述方法還包括：將cad圖紙文件以dxf格式上傳到服務(wù)器。

優(yōu)選地，所述方法還包括：客戶(hù)端利用運(yùn)行在自身中的開(kāi)源庫(kù)或商業(yè)庫(kù)繪制3d的cad圖形。

優(yōu)選地，所述客戶(hù)端將cad對(duì)象的坐標(biāo)轉(zhuǎn)換為本地canvas控件的坐標(biāo)的同時(shí)，結(jié)合屏幕縮放操作，或結(jié)合屏幕縮放和曲線擬合操作，在canvas控件中繪制出cad圖紙。

優(yōu)選地，所述開(kāi)源庫(kù)為javascript編寫(xiě)的webgl第三方開(kāi)源庫(kù)：three.js開(kāi)源庫(kù)。

優(yōu)選地，所述cad對(duì)象包括cad圖紙的點(diǎn)、線、面和文字對(duì)象。

優(yōu)選地，所述canvas控件還繪制出cad圖紙中g(shù)if，jpg或png格式的圖片。

優(yōu)選地，所述服務(wù)器解析cad圖紙文件的二次開(kāi)發(fā)語(yǔ)言可采用但不限于c#語(yǔ)言，也可選擇vc或其他語(yǔ)言開(kāi)發(fā)。

優(yōu)選地，所述服務(wù)器封裝對(duì)象數(shù)據(jù)的語(yǔ)言為c#、java、vc、php語(yǔ)言中的一種。

本發(fā)明還揭示了另外一種技術(shù)方案：一種在web端無(wú)插件展示cad圖紙的裝置，包括：

服務(wù)器和客戶(hù)端，其中，

所述服務(wù)器包括：

服務(wù)器數(shù)據(jù)解析單元，用于將客戶(hù)端請(qǐng)求的cad圖紙文件讀出并解析，分析出cad圖紙中包含的所有cad對(duì)象及其屬性值；

數(shù)據(jù)封裝單元，用于將服務(wù)器數(shù)據(jù)解析單元解析出的所有對(duì)象數(shù)據(jù)封裝成json數(shù)據(jù)/xml數(shù)據(jù)格式發(fā)送給客戶(hù)端；

所述客戶(hù)端包括：

客戶(hù)端數(shù)據(jù)解析單元，用于采用javascript腳本解析出所述json數(shù)據(jù)/xml數(shù)據(jù)中的所有cad對(duì)象及其屬性值；

坐標(biāo)轉(zhuǎn)換單元，用于將經(jīng)客戶(hù)端數(shù)據(jù)解析單元解析出的cad對(duì)象的坐標(biāo)轉(zhuǎn)換為本地canvas控件的坐標(biāo)；

canvas繪圖單元，用于將轉(zhuǎn)換坐標(biāo)后的cad對(duì)象在canvas控件中繪制出來(lái)。

優(yōu)選地，所述裝置還包括cad文件上傳單元，用于將cad圖紙文件以dxf格式上傳到服務(wù)器。

優(yōu)選地，所述canvas繪圖單元包括3d圖形繪制單元，用于利用開(kāi)源庫(kù)或商業(yè)庫(kù)繪制3d的cad圖形。

優(yōu)選地，所述canvas繪圖單元包括屏幕縮放單元，用于對(duì)canvas控件中繪制出的cad圖形進(jìn)行屏幕縮放。

優(yōu)選地，所述canvas繪圖單元包括曲線擬合單元，用于對(duì)canvas控件中繪制出的cad圖形進(jìn)行曲線擬合。

本發(fā)明通過(guò)服務(wù)器解析出cad圖紙中所有對(duì)象數(shù)據(jù)并將其封裝成json數(shù)據(jù)/xml數(shù)據(jù)格式發(fā)送給前端客戶(hù)端；客戶(hù)端采用javascript腳本解析出cad圖紙中所有cad對(duì)象數(shù)據(jù)，并經(jīng)坐標(biāo)轉(zhuǎn)換后，在本地的canvas控件中直接繪制出cad圖紙。與現(xiàn)有技術(shù)相比，具有取得以下技術(shù)效果：

1、無(wú)需在前端客戶(hù)端安裝cad插件，便能實(shí)現(xiàn)cad圖紙的無(wú)失真展示，圖紙展示流暢；

2、因采用javascript語(yǔ)言在canvas控件中繪制圖紙和監(jiān)聽(tīng)事件，可兼容目前所有主流的瀏覽器；

3、只要支持瀏覽器的操作平臺(tái)和系統(tǒng)都能展示cad圖紙，實(shí)現(xiàn)跨平臺(tái)、跨系統(tǒng)展示cad圖紙，兼容性好，一次開(kāi)發(fā)運(yùn)行所有平臺(tái)，易于開(kāi)發(fā)、推廣。

附圖說(shuō)明

圖1是本發(fā)明在web前端無(wú)插件展示cad圖紙的方法的流程示意圖；

圖2是本發(fā)明實(shí)施例在web前端無(wú)插件展示cad圖紙的方法的流程示意圖；

圖3是本發(fā)明在web前端無(wú)插件展示cad圖紙的裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

下面將結(jié)合本發(fā)明的附圖，對(duì)本發(fā)明實(shí)施例的技術(shù)方案進(jìn)行清楚、完整的描述。

結(jié)合圖1～圖3所示，本發(fā)明所揭示的一種在web前端無(wú)插件展示cad圖紙的方法及裝置，通過(guò)在服務(wù)器解析cad圖紙，前端客戶(hù)端采用javascript腳本語(yǔ)言在canvas控件中繪制cad圖紙，實(shí)現(xiàn)前端客戶(hù)端無(wú)插件展示cad圖紙。

結(jié)合圖1和圖2所示，本發(fā)明實(shí)施例所揭示的一種在web前端無(wú)插件展示cad圖紙的方法，包括：

步驟1，服務(wù)器將客戶(hù)端請(qǐng)求的cad圖紙文件讀出并解析，分析出cad圖紙中包含的所有cad對(duì)象及其屬性值，解析完成后將所有對(duì)象數(shù)據(jù)封裝成json數(shù)據(jù)/xml數(shù)據(jù)格式發(fā)送給客戶(hù)端。

具體地，參照?qǐng)D2所示，首先將cad圖紙文件以dxf(全稱(chēng)為drawinginterchangeformat或者drawingexchangeformat)格式上傳到服務(wù)器，這里，dxf是autodesk公司開(kāi)發(fā)的用于autocad與其它軟件之間進(jìn)行cad數(shù)據(jù)交換的cad數(shù)據(jù)文件格式。

服務(wù)器接收客戶(hù)端(如前端瀏覽器)的請(qǐng)求，當(dāng)檢查到瀏覽器請(qǐng)求的數(shù)據(jù)是cad圖紙文件時(shí)，服務(wù)器將請(qǐng)求的cad圖紙文件讀出并對(duì)其格式正確與否進(jìn)行判斷，若判斷出cad圖紙文件格式(即dxf格式)錯(cuò)誤，則輸出錯(cuò)誤提示；若格式正確，則分析出cad圖紙中包含的所有點(diǎn)，線， 面和文字對(duì)象及其對(duì)象的坐標(biāo)信息和其他屬性值。解析完成后將所有對(duì)象數(shù)據(jù)封裝成json(javascriptobjectnotation，javascript對(duì)象表示法)數(shù)據(jù)/xml(extensiblemarkuplanguage，可擴(kuò)展標(biāo)記語(yǔ)言)數(shù)據(jù)格式發(fā)送到前端客戶(hù)端。本實(shí)施例中，服務(wù)器解析cad圖紙文件的二次開(kāi)發(fā)語(yǔ)言可采用但不限于c#語(yǔ)言，也可選擇vc或其他語(yǔ)言開(kāi)發(fā)；服務(wù)器對(duì)cad對(duì)象數(shù)據(jù)的封裝可采用c#、java或php等編程語(yǔ)言處理。

步驟2，客戶(hù)端采用javascript腳本解析出json數(shù)據(jù)/xml數(shù)據(jù)中的所有cad對(duì)象及其屬性值，并將cad對(duì)象的坐標(biāo)轉(zhuǎn)換為本地canvas控件的坐標(biāo)，在canvas控件中繪制出cad圖紙。

具體地，客戶(hù)端接收到j(luò)son數(shù)據(jù)/xml數(shù)據(jù)后，使用javascript腳本語(yǔ)言解析，分析出數(shù)據(jù)中所有cad對(duì)象(點(diǎn)，線，面和文字對(duì)象)及其對(duì)象的坐標(biāo)信息和其他屬性值。其中，javascript是一種基于對(duì)象和事件驅(qū)動(dòng)的客戶(hù)端腳本語(yǔ)言(即一種輕量級(jí)的編程語(yǔ)言)，也是因特網(wǎng)上最流行的腳本語(yǔ)言，其可在所有主流的瀏覽器(如internetexplorer、mozilla、firefox、netscape、opera等)中運(yùn)行，且通常被直接嵌入html頁(yè)面或向html頁(yè)面添加交互行為。

由于cad和canvas控件的繪制機(jī)制不同，所以要在canvas控件中繪制出cad圖紙，就需要將cad對(duì)象的坐標(biāo)轉(zhuǎn)換映射為本地canvas控件的坐標(biāo)。經(jīng)過(guò)坐標(biāo)轉(zhuǎn)換后，cad對(duì)象的坐標(biāo)已經(jīng)變換為本地canvas控件的坐標(biāo)而可直接繪制在canvas控件中。

canvas是html5出現(xiàn)的新標(biāo)簽，像所有的dom對(duì)象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，不過(guò)，canvas元素本身沒(méi)有繪圖能力，必須使用腳本(通常是javascript腳本)來(lái)完成實(shí)際的繪圖任務(wù)，即javascript腳本能夠調(diào)用它來(lái)進(jìn)行繪圖。通過(guò)canvas可以自由的繪制圖形，文字等。而且，可以添加影子，進(jìn)行涂色，另外還可以對(duì)繪制的圖形進(jìn)行旋轉(zhuǎn)、屏幕縮放、曲線擬合等操作，一般在canvas控件繪制出 cad圖后，客戶(hù)端在展示時(shí)，一般結(jié)合著屏幕縮放操作進(jìn)行展示，還可結(jié)合屏幕縮放和曲線擬合等操作進(jìn)行展示。而且，web上常用的gif，jpg，png等格式的圖片；也可以直接進(jìn)行繪制。另外canvas也可以執(zhí)行對(duì)象選擇、放大、縮放、平移、查找(文字)等基本操作。由于canvas繪圖功能較完善，所以本申請(qǐng)基本滿足cad圖紙展示和簡(jiǎn)單操作的需求。因canvas可在所有主流的瀏覽器、操作系統(tǒng)中運(yùn)行，這樣pc或移動(dòng)客戶(hù)端只需安裝支持canvas的瀏覽器就可以瀏覽cad文件，真正達(dá)到了跨平臺(tái)、跨系統(tǒng)的目的。

另外，html5的canvas目前只能支持2d繪圖，如果要繪制cad的3d圖形，可以在客戶(hù)端中增加webgl及three.js開(kāi)源庫(kù)。webgl是一種3d繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把javascript和opengles2.0結(jié)合在一起，通過(guò)增加opengles2.0的一個(gè)javascript綁定，webgl可以為html5canvas提供硬件3d加速渲染。three.js是javascript編寫(xiě)的webgl第三方開(kāi)源庫(kù))，是一款運(yùn)行在瀏覽器中的3d引擎，提供了非常多的3d顯示功能。

本發(fā)明還揭示了一種在web前端無(wú)插件展示cad圖紙的裝置，主要包括cad文件上傳單元、服務(wù)器和客戶(hù)端，其中，

cad文件上傳單元用于將cad圖紙文件以dxf格式上傳到服務(wù)器。

服務(wù)器包括服務(wù)器數(shù)據(jù)解析單元，服務(wù)器接收到客戶(hù)端對(duì)cad圖紙文件的的請(qǐng)求后，服務(wù)器數(shù)據(jù)解析單元將客戶(hù)端請(qǐng)求的cad圖紙讀出，并首先對(duì)其格式正確與否進(jìn)行判斷，若判斷出cad圖紙文件格式錯(cuò)誤，則輸出錯(cuò)誤提示；若格式正確，則分析出cad圖紙中包含的所有點(diǎn)，線，面和文字對(duì)象及其對(duì)象的坐標(biāo)信息和其他屬性值，并將所有對(duì)象數(shù)據(jù)封裝成json數(shù)據(jù)/xml數(shù)據(jù)格式發(fā)送到前端客戶(hù)端。

客戶(hù)端包括客戶(hù)端數(shù)據(jù)解析單元、坐標(biāo)轉(zhuǎn)換單元和canvas繪圖單元，客戶(hù)端數(shù)據(jù)解析單元用于使用javascript腳本語(yǔ)言解析，分析出服務(wù)器發(fā)送 過(guò)來(lái)的json或xml數(shù)據(jù)中所有cad對(duì)象及其對(duì)象的坐標(biāo)信息和其他屬性值。坐標(biāo)轉(zhuǎn)換單元用于將cad對(duì)象的坐標(biāo)轉(zhuǎn)換映射為本地canvas控件的坐標(biāo)。

canvas繪圖單元主要用于將轉(zhuǎn)換坐標(biāo)后的cad對(duì)象在canvas控件中繪制出來(lái)。其至少包括3d圖形繪制單元、屏幕縮放單元和曲線擬合單元，因html5的canvas目前只能支持2d繪圖，如果要繪制cad的3d圖形，就需要一3d圖形繪制單元，本實(shí)施例中3d圖形繪制單元利用three.js開(kāi)源庫(kù)或商業(yè)庫(kù)繪制3d的cad圖形。在canvas繪圖單元繪制出cad圖紙后，一般會(huì)結(jié)合利用屏幕縮放單元的屏幕縮放操作進(jìn)行展示，也可同時(shí)結(jié)合屏幕縮放單元的屏幕縮放操作、曲線擬合單元的曲線擬合操作進(jìn)行展示。當(dāng)然也canvas繪圖單元也可對(duì)繪制的圖形進(jìn)行選擇、放大、縮放、平移、查找(文字)等基本操作。

本發(fā)明的技術(shù)內(nèi)容及技術(shù)特征已揭示如上，然而熟悉本領(lǐng)域的技術(shù)人員仍可能基于本發(fā)明的教示及揭示而作種種不背離本發(fā)明精神的替換及修飾，因此，本發(fā)明保護(hù)范圍應(yīng)不限于實(shí)施例所揭示的內(nèi)容，而應(yīng)包括各種不背離本發(fā)明的替換及修飾，并為本專(zhuān)利申請(qǐng)權(quán)利要求所涵蓋。