在线CAD的产品经常会被集成到很多用户的网页系统内，前端开发人员只要会Java Script,就可以对在线CAD进行集成和二次开发，今天这篇文章我们讲一下梦想CAD控件云图（H5方式）如何配合three.js绘制带线宽的线段。

　　在这之前，如果还没有安装梦想CAD控件的朋友，可以查看快速入门，链接如下：

　　首先mxdraw的图形是有线宽属性的，但是在连续线段可能会存在一些问题，或者你希望用three.js来实现一些自定义的图形，那么我们就可以使用mxdraw提供的MxDbEntity来实现这样一个带线宽的线段，我们先把最基本需要重写的函数写出来:

　　现在我们就有了一个MxDbLine类，用来表示它是一条线段，但是它没有任何与线段有关的数据,我们要先定义一些线段数据，代码如下：

　　首先，可以在three.js示例中找到Line2 这样相关的类，它就可以实现带线宽的线段，我们先安装:

　　现在只需要Line2、LineGeometry、LineMaterial这三个类，你可以不用安装three@113.2的依赖，只需要找到它对应示例的文件，引入到项目中就可以了，以下是具体的实现代码:

　　现在我们基本上用three.js示例中提供的Line2类绘制线段，MxDbLine也可以完整的显示一条线段了，但是它还没有宽度。

　　在MxDbEntity中提供了dLinewidth属性用于表示线宽，用lineWidthByPixels属性表示线宽是否始终跟随屏幕宽度，也就是画布缩放，线的宽度始终不变，当lineWidthByPixels为false时就是另一种three.js中的坐标系宽度，这种宽度是固定的了，不会随着画布缩放而变化。

　　默认dLinewidth都是跟随屏幕的宽度，我们需要先记录当前绘制这条线屏幕像素转成three.js坐标系长度的值是多少，然后后面需要根据lineWidthByPixels属性判断是用跟随屏幕像素的宽度还是three.js坐标系一样的固定宽度。

　　如果lineWidthByPixels = false 那么我们就可以通过当时绘制时记录的three.js坐标系长度的值去比上现在这个时候的1屏幕像素下的three.js坐标系长度，这样就得到了一个线宽比，用线宽比去乘以目前设置的dLinewidth宽度，就算实现需要的宽度了。

　　把line.lineWidthByPixels 设置成false 当缩放画布时，线段就不会始终是屏幕宽度了，而是当时绘制时的three.js实际宽度。

　　以上，在线CAD如何配合three.js绘制带线宽的线段功能就完成了，有不清楚的请移步梦想CAD控件官网。