mvc前端html绘图实现连线

实现连线的方法有很多种，以下是一种基于 HTML5 Canvas 和 jQuery 的实现方式：

1. 在 HTML 中添加两个 Canvas 标签，一个用于绘制节点，一个用于绘制连线。
2. 使用 jQuery 将节点拖拽到 Canvas 上，并在节点上添加事件监听器，记录节点的位置信息。
3. 在连线 Canvas 上使用 JavaScript 绘制连线，根据节点位置信息计算连线起点和终点的坐标。
4. 如果需要实现动态连线，可以在节点上添加事件监听器，在节点拖拽时实时更新连线位置。

下面是一个简单的示例代码，仅供参考：

HTML 代码：

<canvas id="node-canvas"></canvas>
<canvas id="line-canvas"></canvas>

JavaScript 代码：

var nodeCanvas = document.getElementById("node-canvas");
var lineCanvas = document.getElementById("line-canvas");
var nodeCtx = nodeCanvas.getContext("2d");
var lineCtx = lineCanvas.getContext("2d");

var nodes = []; // 保存节点信息的数组

// 监听节点的mousedown事件，记录节点位置信息
$("#node-canvas").on("mousedown", function(e) {
  var offsetX = e.offsetX;
  var offsetY = e.offsetY;
  var newNode = { x: offsetX, y: offsetY };
  nodes.push(newNode);
});

// 监听节点的mouseup事件，绘制连线
$("#node-canvas").on("mouseup", function(e) {
  var offsetX = e.offsetX;
  var offsetY = e.offsetY;
  var lastNode = nodes[nodes.length - 1];
  lineCtx.beginPath();
  lineCtx.moveTo(lastNode.x, lastNode.y);
  lineCtx.lineTo(offsetX, offsetY);
  lineCtx.stroke();
});

// 监听节点的drag事件，实时更新连线位置
$("#node-canvas").on("drag", function(e) {
  var offsetX = e.offsetX;
  var offsetY = e.offsetY;
  var lastNode = nodes[nodes.length - 1];
  lineCtx.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
  lineCtx.beginPath();
  lineCtx.moveTo(lastNode.x, lastNode.y);
  lineCtx.lineTo(offsetX, offsetY);
  lineCtx.stroke();
});