在線CAD的產(chǎn)品經(jīng)常會被集成到很多用戶的網(wǎng)頁系統(tǒng)內(nèi)，前端開發(fā)人員只要會Java Script,就可以對在線CAD進(jìn)行集成和二次開發(fā)，今天這篇文章我們講一下夢想CAD控件云圖（H5方式）如何配合three.js繪制帶線寬的線段。
在這之前，如果還沒有安裝夢想CAD控件的朋友，可以查看快速入門，鏈接如下：
首先mxdraw的圖形是有線寬屬性的，但是在連續(xù)線段可能會存在一些問題，或者你希望用three.js來實(shí)現(xiàn)一些自定義的圖形，那么我們就可以使用mxdraw提供的MxDbEntity來實(shí)現(xiàn)這樣一個帶線寬的線段，我們先把最基本需要重寫的函數(shù)寫出來:
現(xiàn)在我們就有了一個MxDbLine類，用來表示它是一條線段，但是它沒有任何與線段有關(guān)的數(shù)據(jù),我們要先定義一些線段數(shù)據(jù)，代碼如下：
首先，可以在three.js示例中找到Line2 這樣相關(guān)的類，它就可以實(shí)現(xiàn)帶線寬的線段，我們先安裝:
現(xiàn)在只需要Line2、LineGeometry、LineMaterial這三個類，你可以不用安裝three@113.2的依賴，只需要找到它對應(yīng)示例的文件，引入到項(xiàng)目中就可以了，以下是具體的實(shí)現(xiàn)代碼:
現(xiàn)在我們基本上用three.js示例中提供的Line2類繪制線段，MxDbLine也可以完整的顯示一條線段了，但是它還沒有寬度。
在MxDbEntity中提供了dLinewidth屬性用于表示線寬，用lineWidthByPixels屬性表示線寬是否始終跟隨屏幕寬度，也就是畫布縮放，線的寬度始終不變，當(dāng)lineWidthByPixels為false時就是另一種three.js中的坐標(biāo)系寬度，這種寬度是固定的了，不會隨著畫布縮放而變化。
默認(rèn)dLinewidth都是跟隨屏幕的寬度，我們需要先記錄當(dāng)前繪制這條線屏幕像素轉(zhuǎn)成three.js坐標(biāo)系長度的值是多少，然后后面需要根據(jù)lineWidthByPixels屬性判斷是用跟隨屏幕像素的寬度還是three.js坐標(biāo)系一樣的固定寬度。
如果lineWidthByPixels = false 那么我們就可以通過當(dāng)時繪制時記錄的three.js坐標(biāo)系長度的值去比上現(xiàn)在這個時候的1屏幕像素下的three.js坐標(biāo)系長度，這樣就得到了一個線寬比，用線寬比去乘以目前設(shè)置的dLinewidth寬度，就算實(shí)現(xiàn)需要的寬度了。
把line.lineWidthByPixels 設(shè)置成false 當(dāng)縮放畫布時，線段就不會始終是屏幕寬度了，而是當(dāng)時繪制時的three.js實(shí)際寬度。
以上，在線CAD如何配合three.js繪制帶線寬的線段功能就完成了，有不清楚的請移步夢想CAD控件官網(wǎng)。
