css 连接两个div的SVG Bezier路径

zf2sa74q 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(169)

我有两个div，这两个div的边框上有一个图标。我想使用SVG路径线连接icons。
我已经尝试了一些解决方案，但由于某种原因，我似乎无法使它看起来很好。这条线从实际的div开始 * 远离 *。我相信我在计算过程中遇到了一些大问题。
我的项目是在Vue中，所以我不能给予一个适当的链接来显示复制，然而，这里是我使用的函数：

function drawConnector() {
  if (divA.value && divB.value && svg.value) {
    const paths = svg.value
    let oldPaths = paths.children
    for (let a = oldPaths.length - 1; a >= 0; a--) {
      paths.removeChild(oldPaths[a])
    }
    let x1, y1, x4, y4, dx, x2, x3, path, boxA, boxB
    
    const bezierWeight = 0.8
    for (let a = 0; a < 1; a++) {
      // divA and divB are the icons
      boxA = divA.value
      boxB = divB.value
      
      x1 = getOffset(boxA).left + boxA.getBoundingClientRect().width / 2
      y1 = getOffset(boxA).top + (boxA.getBoundingClientRect().height - 100) / 2 // EDIT -100
      x4 = getOffset(boxB).left + boxB.getBoundingClientRect().width / 2
      y4 = getOffset(boxB).top + (boxB.getBoundingClientRect().height - 100)/ 2 // EDIT -100
      // Apply padding
      dx = Math.abs(x4 - x1) * bezierWeight
      if (x4 < x1) {
        x2 = x1 - dx
        x3 = x4 + dx
      } else {
        x2 = x1 + dx
        x3 = x4 - dx
      }
      const data = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`
      path = document.createElementNS(SVG_URL, 'path')
      path.setAttribute('d', data)
      path.setAttribute('class', 'path')
      paths.appendChild(path)
    }
  }
}
function getOffset(element: HTMLDivElement) {
  if (!element.getClientRects().length) {
    return { top: 0, left: 0 }
  }
  let rect = element.getBoundingClientRect()
  let win = element.ownerDocument.defaultView
  return {
    top: rect.top + (win ? win.scrollY : 0),
    left: rect.left + (win ? win.scrollX : 0)
  }
}

字符串
最终结果如下所示：

的数据
div本身是可拖动的，线会相应地重新绘制，但它会保持与端口的距离。如何确保连接从“输出端口”前面的图标开始，并在另一个输出端口正确结束？
还有，我应该使用什么样的贝塞尔曲线来使路径试图绕过div而不是从它下面？
任何指导将不胜感激。
编辑：我一直在篡改它，我在计算Y轴时添加了一个-100。我不知道为什么它会起作用，我尝试了不同的值，但100是最好的。

的
我仍然希望帮助关于这方面的工作，因为-100感觉像是一个侥幸，而不是一个适当的解决方案.此外，我的目标是让链接不去 * 下 * div，而是围绕它，如果你有任何关于这方面的建议，太，当然会很感激，否则我总是可以尝试解决它以后.

css

来源：https://stackoverflow.com/questions/77500772/svg-bezier-path-connecting-two-divs

1条答案

按热度按时间

hsvhsicv1#

很难猜测这个问题是来自图像，但不知何故，你没有考虑SVG相对于区域的偏移或位置（这里我称之为板）。
我希望你能从这个例子中学到一些东西：

const board = document.getElementById('board');
const svg = board.querySelector('svg');
const cardProps = {'width': 120, 'height': 80, 'offset': 65};
updatePaths();
function updatePaths() {
  let paths = svg.querySelectorAll('path');
  [...paths].forEach(path => {
    let from = board.querySelectorAll(`div.card`)[path.dataset.from];
    let to = board.querySelectorAll(`div.card`)[path.dataset.to];
    let fromPoint = {
      'left': from.offsetLeft + cardProps.width,
      'top': from.offsetTop + cardProps.offset
    };
    let toPoint = {
      'left': to.offsetLeft,
      'top': to.offsetTop + cardProps.offset
    };
    path.setAttribute('d', `M ${fromPoint.left} ${fromPoint.top}
    C ${fromPoint.left + 50} ${fromPoint.top} ${toPoint.left - 50} ${toPoint.top} ${toPoint.left} ${toPoint.top}`);
  });
}
board.addEventListener('mousedown', e => {
  switch (e.target.className) {
    case 'card':
      e.target.dataset.moving = "on";
      e.target.mouse = {
        left: e.layerX,
        top: e.layerY
      };
      break;
  }
});
board.addEventListener('mousemove', e => {
  let card = board.querySelector('div[data-moving="on"]');
  if (card) {
    card.style.left = `${e.clientX - card.mouse.left - board.offsetLeft}px`;
    card.style.top = `${e.clientY - card.mouse.top - board.offsetTop}px`;
    updatePaths();
  }
});
document.addEventListener('mouseup', e => {
  let cards = board.querySelectorAll('div[data-moving]');
  [...cards].forEach(card => card.dataset.moving = null);
});

#board {
  width: 100%;
  height: 400px;
  border: solid thin navy;
  position: relative;
}
.card {
  border: solid thin black;
  width: 120px;
  height: 80px;
  position: absolute;
  background-color: WhiteSmoke;
}
.card::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: gray;
  position: absolute;
  left: -5px;
  top: 60px;
}
.card::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: gray;
  position: absolute;
  right: -5px;
  top: 60px;
}
svg path {
  stroke-width: 2px;
  fill: none;
}

<div id="board">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <path d="M 0 0 L 20 20" stroke="black" data-from="0" data-to="1" />
</svg>
  <div class="card" style="left: 10px;top: 10px"></div>
  <div class="card" style="left: 200px;top: 50px"></div>
</div>

展开查看全部

赞(0）回复(0）举报 2023-11-19

我来回答

css 连接两个div的SVG Bezier路径

1条答案

相关问题

热门标签

最新问答