网页CAD开发引线标注的代码如何写？

CAD画图

以下是一个基本的Web端CAD引线标注绘制代码的示例（使用了d3.js和Snap.svg库）：

HTML：

1. <div id="canvas"></div>

复制代码

CSS：

1. #canvas {
   
2. 
   
3.   width: 100%;
   
4. 
   
5.   height: 100vh;
   
6. 
   
7.   position: relative;
   
8. 
   
9. }
   
10. 
    
11. 
    
12. 
    
13. JavaScript：
    
14. 
    
15. // 创建SVG画布
    
16. 
    
17. var svg = Snap("#canvas");
    
18. 
    
19. 
    
20. 
    
21. // 绘制两个点
    
22. 
    
23. var point1 = svg.circle(50, 50, 5);
    
24. 
    
25. var point2 = svg.circle(150, 150, 5);
    
26. 
    
27. 
    
28. 
    
29. // 绘制引线
    
30. 
    
31. var line = svg.line(point1.attr("cx"), point1.attr("cy"), point2.attr("cx"), point2.attr("cy")).attr({
    
32. 
    
33.     stroke: "#000",
    
34. 
    
35.     strokeWidth: 1,
    
36. 
    
37. });
    
38. 
    
39. 
    
40. 
    
41. // 绘制箭头
    
42. 
    
43. var arrow = svg.polygon([-3, 0, 0, -6, 3, 0]).attr({
    
44. 
    
45.     fill: "#000",
    
46. 
    
47. });
    
48. 
    
49. 
    
50. 
    
51. // 计算箭头位置和角度
    
52. 
    
53. var dx = point2.attr("cx") - point1.attr("cx");
    
54. 
    
55. var dy = point2.attr("cy") - point1.attr("cy");
    
56. 
    
57. var angle = Math.atan2(dy, dx) * 180 / Math.PI;
    
58. 
    
59. var x = point2.attr("cx") - Math.cos(angle * Math.PI / 180) * 10;
    
60. 
    
61. var y = point2.attr("cy") - Math.sin(angle * Math.PI / 180) * 10;
    
62. 
    
63. 
    
64. 
    
65. // 将箭头移动并旋转到正确位置
    
66. 
    
67. arrow.transform("translate(" + x + "," + y + ") rotate(" + angle + ")");
    
68. 
    
69. 
    
70. 
    
71. // 绘制文字
    
72. 
    
73. var text = svg.text((point1.attr("cx") + point2.attr("cx")) / 2, (point1.attr("cy") + point2.attr("cy")) / 2, "10").attr({
    
74. 
    
75.     "text-anchor": "middle",
    
76. 
    
77. });
    
78. 
    
79. 
    
80. 
    
81. // 计算文字位置
    
82. 
    
83. var bbox = text.getBBox();
    
84. 
    
85. var textX = bbox.x + bbox.width / 2;
    
86. 
    
87. var textY = bbox.y + bbox.height / 2;
    
88. 
    
89. 
    
90. 
    
91. // 将文字移动到正确位置
    
92. 
    
93. text.attr({ x: textX, y: textY });
    
94. 
    
95. 
    
96. 
    
97. // 绘制横线
    
98. 
    
99. var line2 = svg.line(textX - 10, textY, textX + 10, textY).attr({
    
100. 
     
101.     stroke: "#000",
     
102. 
     
103.     strokeWidth: 1,
     
104. 
     
105. });
     
106. 
     
107. 
     
108. 
     
109. // 将箭头和文字移到最顶层
     
110. 
     
111. arrow.appendTo(svg);
     
112. 
     
113. text.appendTo(svg);
     
114. 
     
115. 
     
116. 
     
117. // 给点添加拖拽事件
     
118. 
     
119. point1.drag(function(dx, dy, x, y) {
     
120. 
     
121.     this.attr({ cx: parseInt(this.ox) + dx, cy: parseInt(this.oy) + dy });
     
122. 
     
123.     line.attr({ x1: this.attr("cx"), y1: this.attr("cy") });
     
124. 
     
125.     updateArrow();
     
126. 
     
127.     updateText();
     
128. 
     
129.     updateLine2();
     
130. 
     
131. }, function() {
     
132. 
     
133.     this.ox = this.attr("cx");
     
134. 
     
135.     this.oy = this.attr("cy");
     
136. 
     
137. });
     
138. 
     
139. 
     
140. 
     
141. point2.drag(function(dx, dy, x, y) {
     
142. 
     
143.     this.attr({ cx: parseInt(this.ox) + dx, cy: parseInt(this.oy) + dy });
     
144. 
     
145.     line.attr({ x2: this.attr("cx"), y2: this.attr("cy") });
     
146. 
     
147.     updateArrow();
     
148. 
     
149.     updateText();
     
150. 
     
151.     updateLine2();
     
152. 
     
153. }, function() {
     
154. 
     
155.     this.ox = this.attr("cx");
     
156. 
     
157.     this.oy = this.attr("cy");
     
158. 
     
159. });
     
160. 
     
161. 
     
162. 
     
163. // 更新箭头位置和角度
     
164. 
     
165. function updateArrow() {
     
166. 
     
167.     var dx = point2.attr("cx") - point1.attr("cx");
     
168. 
     
169.     var dy = point2.attr("cy") - point1.attr("cy");
     
170. 
     
171.     var angle = Math.atan2(dy, dx) * 180 / Math.PI;
     
172. 
     
173.     var x = point2.attr("cx") - Math.cos(angle * Math.PI / 180) * 10;
     
174. 
     
175.     var y = point2.attr("cy") - Math.sin(angle * Math.PI / 180) * 10;
     
176. 
     
177.     arrow.transform("translate(" + x + "," + y + ") rotate(" + angle + ")");
     
178. 
     
179. }
     
180. 
     
181. 
     
182. 
     
183. // 更新文字位置
     
184. 
     
185. function updateText() {
     
186. 
     
187.     var bbox = text.getBBox();
     
188. 
     
189.     var textX = bbox.x + bbox.width / 2;
     
190. 
     
191.     var textY = bbox.y + bbox.height / 2;
     
192. 
     
193.     text.attr({ x: textX, y: textY });
     
194. 
     
195. }
     
196. 
     
197. 
     
198. 
     
199. // 更新横线位置
     
200. 
     
201. function updateLine2() {
     
202. 
     
203.     var bbox = text.getBBox();
     
204. 
     
205.     var textX = bbox.x + bbox.width / 2;
     
206. 
     
207.     var textY = bbox.y + bbox.height / 2;
     
208. 
     
209.     line2.attr({ x1: textX - 10, y1: textY, x2: textX + 10, y2: textY });
     
210. 
     
211. }<span style="font-family: 宋体; font-size: 10.5pt; background-color: rgb(255, 255, 255);"> </span>

复制代码

这个示例代码演示了如何绘制一个简单的CAD引线标注，并实现拖拽修改点、自动计算箭头位置和角度、自动调整文字位置和水平线位置等功能。您可以根据需要对代码进行修改和调整。

wo5068056

感谢大佬！

复仇云

学习一下

复仇云

感谢分享