以下是一个基本的Web端CAD引线标注绘制代码的示例(使用了d3.js和Snap.svg库): HTML: <div id="canvas"></div> CSS: #canvas { width: 100%; height: 100vh; position: relative; } JavaScript: // 创建SVG画布 var svg = Snap("#canvas"); // 绘制两个点 var point1 = svg.circle(50, 50, 5); var point2 = svg.circle(150, 150, 5); // 绘制引线 var line = svg.line(point1.attr("cx"), point1.attr("cy"), point2.attr("cx"), point2.attr("cy")).attr({ stroke: "#000", strokeWidth: 1, }); // 绘制箭头 var arrow = svg.polygon([-3, 0, 0, -6, 3, 0]).attr({ fill: "#000", }); // 计算箭头位置和角度 var dx = point2.attr("cx") - point1.attr("cx"); var dy = point2.attr("cy") - point1.attr("cy"); var angle = Math.atan2(dy, dx) * 180 / Math.PI; var x = point2.attr("cx") - Math.cos(angle * Math.PI / 180) * 10; var y = point2.attr("cy") - Math.sin(angle * Math.PI / 180) * 10; // 将箭头移动并旋转到正确位置 arrow.transform("translate(" + x + "," + y + ") rotate(" + angle + ")"); // 绘制文字 var text = svg.text((point1.attr("cx") + point2.attr("cx")) / 2, (point1.attr("cy") + point2.attr("cy")) / 2, "10").attr({ "text-anchor": "middle", }); // 计算文字位置 var bbox = text.getBBox(); var textX = bbox.x + bbox.width / 2; var textY = bbox.y + bbox.height / 2; // 将文字移动到正确位置 text.attr({ x: textX, y: textY }); // 绘制横线 var line2 = svg.line(textX - 10, textY, textX + 10, textY).attr({ stroke: "#000", strokeWidth: 1, }); // 将箭头和文字移到最顶层 arrow.appendTo(svg); text.appendTo(svg); // 给点添加拖拽事件 point1.drag(function(dx, dy, x, y) { this.attr({ cx: parseInt(this.ox) + dx, cy: parseInt(this.oy) + dy }); line.attr({ x1: this.attr("cx"), y1: this.attr("cy") }); updateArrow(); updateText(); updateLine2(); }, function() { this.ox = this.attr("cx"); this.oy = this.attr("cy"); }); point2.drag(function(dx, dy, x, y) { this.attr({ cx: parseInt(this.ox) + dx, cy: parseInt(this.oy) + dy }); line.attr({ x2: this.attr("cx"), y2: this.attr("cy") }); updateArrow(); updateText(); updateLine2(); }, function() { this.ox = this.attr("cx"); this.oy = this.attr("cy"); }); // 更新箭头位置和角度 function updateArrow() { var dx = point2.attr("cx") - point1.attr("cx"); var dy = point2.attr("cy") - point1.attr("cy"); var angle = Math.atan2(dy, dx) * 180 / Math.PI; var x = point2.attr("cx") - Math.cos(angle * Math.PI / 180) * 10; var y = point2.attr("cy") - Math.sin(angle * Math.PI / 180) * 10; arrow.transform("translate(" + x + "," + y + ") rotate(" + angle + ")"); } // 更新文字位置 function updateText() { var bbox = text.getBBox(); var textX = bbox.x + bbox.width / 2; var textY = bbox.y + bbox.height / 2; text.attr({ x: textX, y: textY }); } // 更新横线位置 function updateLine2() { var bbox = text.getBBox(); var textX = bbox.x + bbox.width / 2; var textY = bbox.y + bbox.height / 2; line2.attr({ x1: textX - 10, y1: textY, x2: textX + 10, y2: textY }); }这个示例代码演示了如何绘制一个简单的CAD引线标注,并实现拖拽修改点、自动计算箭头位置和角度、自动调整文字位置和水平线位置等功能。您可以根据需要对代码进行修改和调整。 |
|