网页CAD的mxdraw库实现Autocad中的圆

lihao2014

前言

Web端显示CAD图纸的应用场景很广泛，单纯的浏览DWG逐渐满足不了用户的实际需求，浏览的同时再加上简单的绘制和批注更符合大家的应用场景，接下来我们讲一下如何利用Mxdraw库实现AutoCAD中的画圆命令。

在线CAD测试：https://demo.mxdraw3d.com:3000/mxcad/

首先我们知道DWG图纸要在网页上显示需要安装转换程序，在测试开始之前，我们要熟悉转换方法和原理，请查看快速入门中的《如何在自己系统中浏览dwg文件》章节，如下图所示：

如果还有疑问可以查看：https://help.mxdraw.com/?pid=107 中《mxdraw前端库预览图纸》章节，如下图：

关于[MxDbCircleShape]

mxdraw库是一款用于绘制CAD图形的JavaScript库，它提供了一系列的图形形状类，可以实现类似于Autocad的绘图功能，在此之前先看一下圆弧形状类的描述：[MxDbCircleShape圆(弧)形状类]，基于这个形状类我们可以实现类似autocad绘制圆的功能，首先我们先通过继承类的方式，为圆提供可以改变这个圆的夹点，代码如下：

1. <font size="3"><font size="4">import { MxDbCircleShape } from "mxdraw";
   
2. 
   
3. class MxDbCircle extends MxDbCircleShape {
   
4. 
   
5.    /**是否闭合到中心位置 */
   
6. 
   
7.   isClosedToCenter = false
   
8. 
   
9.   /**
   
10. 
    
11.    * 返回自定义对象的夹点.
    
12. 
    
13.    * @param
    
14. 
    
15.    * @returns Array<THREE.Vector3>
    
16. 
    
17.    */
    
18. 
    
19.   getGripPoints() {
    
20. 
    
21.     const { x, y, z } = this.center;
    
22. 
    
23.     // 计算圆的上下左右夹点
    
24. 
    
25.     let upPoint = new THREE.Vector3(x, y + this.radius, z),
    
26. 
    
27.       downPoint = new THREE.Vector3(x, y - this.radius, z),
    
28. 
    
29.       leftPoint = new THREE.Vector3(x - this.radius, y, z),
    
30. 
    
31.       rightPoint = new THREE.Vector3(x + this.radius, y, z);
    
32. 
    
33. 
    
34. 
    
35.     return [this.center, upPoint, downPoint, leftPoint, rightPoint];
    
36. 
    
37.   }
    
38. 
    
39.   /**
    
40. 
    
41.    * 移动自定义对象的夹点.
    
42. 
    
43.    * @param
    
44. 
    
45.    * @returns boolean
    
46. 
    
47.    */
    
48. 
    
49.   moveGripPointsAt(index: number, offset: THREE.Vector3) {
    
50. 
    
51.     const [center, upPoint, downPoint, leftPoint, rightPoint] =
    
52. 
    
53.       this.getGripPoints();
    
54. 
    
55.     // 改变上下左右的夹点则改变radius半径
    
56. 
    
57.     if (index === 0) this.center = center.add(offset);
    
58. 
    
59.     if (index === 1) this.radius = upPoint.add(offset).distanceTo(this.center);
    
60. 
    
61.     if (index === 2)
    
62. 
    
63.       this.radius = downPoint.add(offset).distanceTo(this.center);
    
64. 
    
65.     if (index === 3)
    
66. 
    
67.       this.radius = leftPoint.add(offset).distanceTo(this.center);
    
68. 
    
69.     if (index === 4)
    
70. 
    
71.       this.radius = rightPoint.add(offset).distanceTo(this.center);
    
72. 
    
73.     return true;
    
74. 
    
75.   }
    
76. 
    
77. }</font></font>

复制代码

属性列表如下：

属性名	类型	描述
center	Vector3	圆心坐标
radius	number	圆半径
startAngle	number	弧开始角度
endAngle	number	弧结束角度
clockwise	boolean	是否以顺时针方向创建（扫过）弧线
isClosedToCenter	boolean	是否闭合到中心位置

需要注意的是，MxDbCircleShape继承自[MxDbEllipseShape]，因此MxDbCircleShape也拥有MxDbEllipseShape的所有属性。我们只需要知道圆心和半径就可与直接绘制一个圆了。

绘制圆的方法
方法1：两点绘制圆

参考代码如下：

1. <font size="3">import { MrxDbgUiPrPoint, MxFun, MxDbCircleShape, McEdGetPointWorldDrawObject, } from "mxdraw";
   
2. 
   
3. const drawCircleAtTwoPoints = async () => {
   
4. 
   
5.     const getPoint = new MrxDbgUiPrPoint();
   
6. 
   
7.     const circle = new MxDbCircle();
   
8. 
   
9.     // 直接确定圆心
   
10. 
    
11.     circle.center = await getPoint.go()
    
12. 
    
13.     getPoint.setUserDraw(
    
14. 
    
15.         (
    
16. 
    
17.             currentPoint: THREE.Vector3,
    
18. 
    
19.             pWorldDraw: McEdGetPointWorldDrawObject
    
20. 
    
21.         )=> {
    
22. 
    
23.             // 根据圆心和圆弧上任意一点确定半径
    
24. 
    
25.             circle.radius = circle.center.distanceTo(currentPoint)
    
26. 
    
27.             pWorldDraw.drawCustomEntity(circle);
    
28. 
    
29.             // 再绘制一根圆弧和圆心的连接线表示现在正在确定半径
    
30. 
    
31.             pWorldDraw.drawLine(circle.center, currentPoint);
    
32. 
    
33.         }
    
34. 
    
35.     );
    
36. 
    
37.     // 确定最后绘制的圆的半径
    
38. 
    
39.     circle.radius = circle.center.distanceTo(await getPoint.go())
    
40. 
    
41.     MxFun.getCurrentDraw().addMxEntity(circle);
    
42. 
    
43. }
    
44. 
    
45. drawCircleAtTwoPoints()</font>

复制代码

方法2：三点绘制圆

通过三元一次方程组求解圆心的坐标的具体步骤如下：

1）假设圆心的坐标为(cx, cy, cz)，将三个点的坐标代入圆的一般方程，得到三个方程：

a1 * cx + b1 * cy + c1 * cz + d1 = 0

a2 * cx + b2 * cy + c2 * cz + d2 = 0

a3 * cx + b3 * cy + c3 * cz + d3 = 0

2）将三个方程进行整理，得到以下形式的方程：

(a1 * b2 * c3 - a1 * b3 * c2 - a2 * b1 * c3 + a2 * b3 * c1 + a3 * b1 * c2 - a3 * b2 * c1) * cx +

(b1 * c2 * d3 - b1 * c3 * d2 - b2 * c1 * d3 + b2 * c3 * d1 + b3 * c1 * d2 - b3 * c2 * d1) * cy +

(a1 * b2 * d3 - a1 * b3 * d2 - a2 * b1 * d3 + a2 * b3 * d1 + a3 * b1 * d2 - a3 * b2 * d1) * cz +

(a1 * b2 * c3 - a1 * b3 * c2 - a2 * b1 * c3 + a2 * b3 * c1 + a3 * b1 * c2 - a3 * b2 * c1) = 0

3）根据方程的系数，将cx、cy和cz的系数分别除以(a1 * b2 * c3 - a1 * b3 * c2 - a2 * b1 * c3 + a2 * b3 * c1 + a3 * b1 * c2 - a3 * b2 * c1)，得到cx、cy和cz的值。将得到的cx、cy和cz的值作为圆心的坐标，返回一个新的THREE.Vector3对象。

4）这样就可以通过三元一次方程组的求解方法，求得三个点确定的圆心的坐标，代码如下:

1. <font size="3">export const threePointsToDetermineTheCenterOfTheCircle = (
   
2. 
   
3.   points: [THREE.Vector3, THREE.Vector3, THREE.Vector3]
   
4. 
   
5. ) => {
   
6. 
   
7.   const [point1, point2, point3] = points;
   
8. 
   
9.   const { x: x1, y: y1, z: z1 } = point1;
   
10. 
    
11.   const { x: x2, y: y2, z: z2 } = point2;
    
12. 
    
13.   const { x: x3, y: y3, z: z3 } = point3;
    
14. 
    
15.   const a1 = y1 * z2 - y2 * z1 - y1 * z3 + y3 * z1 + y2 * z3 - y3 * z2,
    
16. 
    
17.     b1 = -(x1 * z2 - x2 * z1 - x1 * z3 + x3 * z1 + x2 * z3 - x3 * z2),
    
18. 
    
19.     c1 = x1 * y2 - x2 * y1 - x1 * y3 + x3 * y1 + x2 * y3 - x3 * y2,
    
20. 
    
21.     d1 = -(
    
22. 
    
23.       x1 * y2 * z3 -
    
24. 
    
25.       x1 * y3 * z2 -
    
26. 
    
27.       x2 * y1 * z3 +
    
28. 
    
29.       x2 * y3 * z1 +
    
30. 
    
31.       x3 * y1 * z2 -
    
32. 
    
33.       x3 * y2 * z1
    
34. 
    
35.     ),
    
36. 
    
37.     a2 = 2 * (x2 - x1),
    
38. 
    
39.     b2 = 2 * (y2 - y1),
    
40. 
    
41.     c2 = 2 * (z2 - z1),
    
42. 
    
43.     d2 = x1 * x1 + y1 * y1 + z1 * z1 - x2 * x2 - y2 * y2 - z2 * z2,
    
44. 
    
45.     a3 = 2 * (x3 - x1),
    
46. 
    
47.     b3 = 2 * (y3 - y1),
    
48. 
    
49.     c3 = 2 * (z3 - z1),
    
50. 
    
51.     d3 = x1 * x1 + y1 * y1 + z1 * z1 - x3 * x3 - y3 * y3 - z3 * z3,
    
52. 
    
53.     // 计算圆心的坐标
    
54. 
    
55.     cx =
    
56. 
    
57.       -(
    
58. 
    
59.         b1 * c2 * d3 -
    
60. 
    
61.         b1 * c3 * d2 -
    
62. 
    
63.         b2 * c1 * d3 +
    
64. 
    
65.         b2 * c3 * d1 +
    
66. 
    
67.         b3 * c1 * d2 -
    
68. 
    
69.         b3 * c2 * d1
    
70. 
    
71.       ) /
    
72. 
    
73.       (a1 * b2 * c3 -
    
74. 
    
75.         a1 * b3 * c2 -
    
76. 
    
77.         a2 * b1 * c3 +
    
78. 
    
79.         a2 * b3 * c1 +
    
80. 
    
81.         a3 * b1 * c2 -
    
82. 
    
83.         a3 * b2 * c1),
    
84. 
    
85.     cy =
    
86. 
    
87.       (a1 * c2 * d3 -
    
88. 
    
89.         a1 * c3 * d2 -
    
90. 
    
91.         a2 * c1 * d3 +
    
92. 
    
93.         a2 * c3 * d1 +
    
94. 
    
95.         a3 * c1 * d2 -
    
96. 
    
97.         a3 * c2 * d1) /
    
98. 
    
99.       (a1 * b2 * c3 -
    
100. 
     
101.         a1 * b3 * c2 -
     
102. 
     
103.         a2 * b1 * c3 +
     
104. 
     
105.         a2 * b3 * c1 +
     
106. 
     
107.         a3 * b1 * c2 -
     
108. 
     
109.         a3 * b2 * c1),
     
110. 
     
111.     cz =
     
112. 
     
113.       -(
     
114. 
     
115.         a1 * b2 * d3 -
     
116. 
     
117.         a1 * b3 * d2 -
     
118. 
     
119.         a2 * b1 * d3 +
     
120. 
     
121.         a2 * b3 * d1 +
     
122. 
     
123.         a3 * b1 * d2 -
     
124. 
     
125.         a3 * b2 * d1
     
126. 
     
127.       ) /
     
128. 
     
129.       (a1 * b2 * c3 -
     
130. 
     
131.         a1 * b3 * c2 -
     
132. 
     
133.         a2 * b1 * c3 +
     
134. 
     
135.         a2 * b3 * c1 +
     
136. 
     
137.         a3 * b1 * c2 -
     
138. 
     
139.         a3 * b2 * c1);
     
140. 
     
141. 
     
142. 
     
143.   return new THREE.Vector3(cx, cy, cz);
     
144. 
     
145. };</font>

复制代码

5）已经知道通过三个圆上的点计算出圆心的算法，那么我们就可以通过三个点绘制一个圆，代码如下:

1. <font size="3">import { MrxDbgUiPrPoint, MxFun, McEdGetPointWorldDrawObject, } from "mxdraw"
   
2. 
   
3. const drawCircleAtThreePoints = async () => {
   
4. 
   
5.     const getPoint = new MrxDbgUiPrPoint();
   
6. 
   
7.     const circle = new MxDbCircle();
   
8. 
   
9.     let points = [] as unknown as [THREE.Vector3, THREE.Vector3, THREE.Vector3]
   
10. 
    
11.     points.push(await getPoint.go())
    
12. 
    
13.     getPoint.setUserDraw((currentPoint, pWorldDraw) => {
    
14. 
    
15.         pWorldDraw.drawLine(points[0], currentPoint)
    
16. 
    
17.     })
    
18. 
    
19.     points.push(await getPoint.go())
    
20. 
    
21.     getPoint.setUserDraw(
    
22. 
    
23.         (
    
24. 
    
25.             currentPoint: THREE.Vector3,
    
26. 
    
27.             pWorldDraw: McEdGetPointWorldDrawObject
    
28. 
    
29.         )=> {
    
30. 
    
31.             circle.center = threePointsToDetermineTheCenterOfTheCircle([points[0], points[1], currentPoint])
    
32. 
    
33.             circle.radius = circle.center.distanceTo(currentPoint)
    
34. 
    
35.             pWorldDraw.drawCustomEntity(circle);
    
36. 
    
37.         }
    
38. 
    
39.     );
    
40. 
    
41.     points.push(await getPoint.go())
    
42. 
    
43.     circle.center = threePointsToDetermineTheCenterOfTheCircle(points);
    
44. 
    
45.     circle.radius = circle.center.distanceTo(points[0]);
    
46. 
    
47.     MxFun.getCurrentDraw().addMxEntity(circle);
    
48. 
    
49. }
    
50. 
    
51. drawCircleAtThreePoints()</font>

复制代码

效果图如下:

Demo源码：

https://gitee.com/mxcadx/mxdraw-article/tree/master/mxdraw%E5%BA%93%E5%AE%9E%E7%8E%B0autocad%E4%B8%AD%E7%9A%84%E5%9C%86