前端两个 dom 元素是可以拖拽的， 要实现两个 dom 之间的连接线，如何实现【热度: 55】

[yanlele]

关键词：拖拽元素连线实现

1. 基本思路和技术选择

   • 思路：要实现两个可拖拽 DOM 元素之间的连接线，关键在于获取两个元素的位置信息，并根据这些位置动态地绘制连线。通常可以使用 HTML5 的 Canvas 或者 SVG 来实现连线的绘制。
   • 技术对比：
     • Canvas：它是一个通过 JavaScript 来绘制图形的 HTML 元素。使用 Canvas 绘制连线时，需要在每次元素位置变化时重新计算连线的起点和终点坐标，并通过 JavaScript 的绘图 API（如beginPath、moveTo、lineTo和stroke等）来绘制连线。Canvas 的优点是绘制性能高，适合绘制复杂的图形和动画；缺点是它是基于像素的绘制，对图形的操作（如修改、删除等）相对复杂。
     • SVG（Scalable Vector Graphics）：它是一种基于 XML 的矢量图形格式，在 HTML 中可以直接使用 SVG 标签来定义图形。使用 SVG 绘制连线时，可以通过<line>标签来定义连线，并且可以利用 SVG 的属性（如x1、y1表示起点坐标，x2、y2表示终点坐标）来动态更新连线的位置。SVG 的优点是图形是矢量的，易于编辑和操作，并且可以通过 CSS 进行样式设置；缺点是在处理大量复杂图形时，性能可能不如 Canvas。

2. 使用 SVG 实现连接线（推荐方案）

   • 步骤一：创建 SVG 元素并添加到 DOM 中

     • 在 HTML 文件中，首先创建一个 SVG 元素，并将其添加到文档的合适位置。例如：

     <div id="container">
       <svg id="svg-container" width="500" height="500"></svg>
     </div>

     • 这里创建了一个宽度和高度都为 500px 的 SVG 容器，并将其放置在一个id为container的div元素内部。

   • 步骤二：创建连线元素并设置初始位置（使用 JavaScript）

     • 假设已经有两个可拖拽的 DOM 元素，它们的id分别为element1和element2。在 JavaScript 中，可以通过以下方式创建连线并设置初始位置：

     const svgContainer = document.getElementById("svg-container");
     const element1 = document.getElementById("element1");
     const element2 = document.getElementById("element2");
     // 创建SVG连线元素
     const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
     line.setAttribute("x1", element1.offsetLeft + element1.offsetWidth / 2);
     line.setAttribute("y1", element1.offsetTop + element1.offsetHeight / 2);
     line.setAttribute("x2", element2.offsetLeft + element2.offsetWidth / 2);
     line.setAttribute("y2", element2.offsetTop + element2.offsetHeight / 2);
     line.setAttribute("stroke", "black");
     line.setAttribute("stroke - width", "2");
     // 将连线元素添加到SVG容器中
     svgContainer.appendChild(line);

     • 这段代码首先获取了 SVG 容器和两个可拖拽元素。然后使用createElementNS方法创建了一个 SVG 的<line>元素，这个方法是用于创建 SVG 元素的正确方式，因为 SVG 元素是在一个特定的命名空间下。接着，通过setAttribute方法设置了连线的起点（x1、y1）和终点（x2、y2）坐标，这里的坐标是根据元素的偏移位置（offsetLeft和offsetTop）以及元素宽度和高度的一半来计算的，这样连线就会连接到元素的中心位置。最后，设置了连线的颜色（stroke）和宽度（stroke - width），并将连线元素添加到 SVG 容器中。

   • 步骤三：更新连线位置（在元素拖拽事件中）

     • 为了在元素拖拽时更新连线的位置，需要在拖拽事件处理函数中添加代码来更新连线的起点和终点坐标。假设使用了 HTML5 的drag事件来实现元素的拖拽，以下是一个简单的示例：

     element1.addEventListener("drag", (event) => {
       line.setAttribute("x1", event.target.offsetLeft + event.target.offsetWidth / 2);
       line.setAttribute("y1", event.target.offsetTop + event.target.offsetHeight / 2);
     });
     element2.addEventListener("drag", (event) => {
       line.setAttribute("x2", event.target.offsetLeft + event.target.offsetWidth / 2);
       line.setAttribute("y2", event.target.offsetTop + event.target.offsetHeight / 2);
     });

     • 在这里，分别为两个可拖拽元素添加了drag事件监听器。当元素被拖拽时，会获取元素的新位置，并更新连线的起点（对于element1）或终点（对于element2）坐标，从而实现连线随着元素位置变化而动态更新的效果。

3. 使用 Canvas 实现连接线（替代方案）

   • 步骤一：创建 Canvas 元素并获取绘图上下文

     • 在 HTML 文件中创建一个 Canvas 元素：

     <div id="container">
       <canvas id="canvas-container" width="500" height="500"></canvas>
     </div>

     • 然后在 JavaScript 中获取 Canvas 元素和它的绘图上下文（2d上下文用于绘制二维图形）：

     const canvasContainer = document.getElementById("canvas-container");
     const ctx = canvasContainer.getContext("2d");

   • 步骤二：绘制初始连线（根据元素位置）

     • 同样假设已经有两个可拖拽的 DOM 元素，id为element1和element2。在 JavaScript 中计算连线的起点和终点坐标并绘制连线：

     const element1 = document.getElementById("element1");
     const element2 = document.getElementById("element2");
     function drawLine() {
       const x1 = element1.offsetLeft + element1.offsetWidth / 2;
       const y1 = element1.offsetTop + element1.offsetHeight / 2;
       const x2 = element2.offsetLeft + element2.offsetWidth / 2;
       const y2 = element2.offsetTop + element2.offsetHeight / 2;
       ctx.beginPath();
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.strokeStyle = "black";
       ctx.lineWidth = 2;
       ctx.stroke();
     }
     drawLine();

     • 这段代码定义了一个drawLine函数，在函数内部计算了连线的起点和终点坐标，然后使用 Canvas 的绘图 API（beginPath、moveTo、lineTo和stroke）来绘制连线，设置了连线的颜色（strokeStyle）和宽度（lineWidth）。

   • 步骤三：更新连线（在元素拖拽事件中）

     • 在元素拖拽事件处理函数中，需要清除之前绘制的连线（因为 Canvas 是基于像素的绘制，每次重新绘制都需要清除之前的内容），然后重新绘制连线：

     element1.addEventListener("drag", (event) => {
       ctx.clearRect(0, 0, canvasContainer.width, canvasContainer.height);
       drawLine();
     });
     element2.addEventListener("drag", (event) => {
       ctx.clearRect(0, 0, canvasContainer.width, canvasContainer.height);
       drawLine();
     });

     • 这里为两个可拖拽元素添加了drag事件监听器。当元素被拖拽时，首先使用clearRect方法清除整个 Canvas 画布，然后调用drawLine函数重新绘制连线，以实现连线随着元素位置变化而更新的效果。