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

HTML：

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

 

CSS：

#canvas {

  width: 100%;

  height: 100vh;

  position: relative;

}

 

：

// 创建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引线标注，并实现拖拽修改点、自动计算箭头位置和角度、自动调整文字位置和水平线位置等功能。您可以根据需要对代码进行修改和调整。