如何使用 raphaeljs 中的一条线连接两个 svg 元素答案

【问题标题】：How to connect two svg elements using a line in raphaeljs如何使用 raphaeljs 中的一条线连接两个 svg 元素
【发布时间】：2023-03-11 01:22:01
【问题描述】：

我知道已经有一些关于 SO 的示例，但我想了解实际的内部结构是如何工作的。我知道如何使用 M 和 L 属性创建一条线，但我想了解如何使用 javascript 连接形状。

我浏览了一些示例，但我不明白它是如何实现的。任何示例或链接将不胜感激

这是我的代码：

<!doctype html>
<html>
    <head>
        <title>Editor</title>
        <meta http-equiv="x-ua-compatible" content="ie=9"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />

        <script type="text/javascript">
            window.onload = function ()
            {
                var paper = new Raphael(Raphael("container", "100%", "100%"));
                var sidebar = paper.rect(0, 43.5, 69, 620);
                var rect = paper.rect(10, 50, 51, 41, 5).attr({stroke: '#6DAACA', 'stroke-width': 1, fill: '#D6F2FC'});
                var circle1 = paper.circle(35, 145, 25).attr({fill: '#fff', 'stroke-width': 2, stroke: '#399324'});
                var circle2 = paper.circle(35, 225, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#9E2F3C'});
                var circle3 = paper.circle(35, 310, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#D5C096'});
                var Customrect = paper.path("M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411");

                // circle clonning
                paper.set(circle1);
                var clone_handler = function () {
                    var x = this.clone();
                    x.drag(move, start, up);
                };
                var start = function (x, y, event) {
                    this.ox = this.attr("cx");
                    this.oy = this.attr("cy");
                },
                        move = function (dx, dy) {
                            this.attr({
                                cx: this.ox + dx,
                                cy: this.oy + dy
                            });
                        },
                        up = function () {
                            this.animate({
                                r: 20,
                                opacity: .8
                            }, 500, ">");
                        };
                circle1.mousemove(clone_handler);
                circle2.mousemove(clone_handler);
                circle3.mousemove(clone_handler);
            };
        </script>
    </head>
    <body>
        <div id="container">
            <div id="header" style="margin-bottom: 0;">
                <h1 id="title">Editor</h1>
                <div id="footer"></div>
            </div>
        </div>
    </body>
</html>

这是现场演示：https://jsbin.com/qawupugivi/edit?html,css,output

【问题讨论】：

你得到解决方案了吗。如果是，你能帮助我吗？因为我也在寻找同样的东西。谢谢
@Zaheer 在 Raphael Js 中是不可能的。使用任何其他 svg lib。可能是d3js
家谱呢？你成功了吗？
没试过

标签： javascript svg raphael

【解决方案1】：

您可以使用 line() 方法或 path() 绘制一条线。你似乎想知道路径方法，所以会这样做。

您需要考虑将线绘制到哪里，我将通过选择对象的中心来完成，因此它应该适用于任何形状。

我们将设置一个处理程序，因此在 dblclick() 上选择一个对象

x.dblclick( addLine )

然后是一个函数来实际添加路径。

首先我们通过 Raphael 获得两个边界框，它提供了一个元素的中心（注意，原生的 getBBox 方法只提供了 x,y,width,height，但 Raph 提供了一些额外的位）。

然后我们创建新路径，

M = 移动到 L = 行至

所以我们将 M 移动到我们想要开始绘制的点（元素 1 的中心），然后将 Line To L 移动到另一个元素的中心。

将元素拖出，然后双击两个元素在它们之间画一条线

function addLine() {
   if( lastEl ) {
      bb1 = this.getBBox();    
      bb2 = lastEl.getBBox();
      var newPath =   paper.path('M'+bb1.cx+','+bb1.cy+'L'+bb2.cx+','+bb2.cy);
      newPath.attr({ stroke: 'blue'})

   } 
   lastEl = this;
}

jsbin : 双击 2 个元素

你也可以只使用一条线而不是一条路径，同样的原则。

您可以通过 insertBefore 元素隐藏线条的中心，使其显示在“顶部”

如果您在该行之后拖动元素，它不会移动，您需要将其编码为拖动处理程序的一部分以更新路径或行（这是某些库为您所做的）。

【讨论】：

lastEl 是什么if(lastEl)？
我猜this 代表当前元素，对吧？为什么this.getBox(0) 是零？
我稍微修改了代码以实现鼠标拖动时的线条绘制，但它不起作用。请查看jsbin.com/filohigimu/edit?html,output
有一个错字，0 不应该在那里（它不在 jsbin 上）。 lastEl，是最后一个被选中的元素。这代表传递给函数的对象（在 Raphs 的情况下通常是元素，但您需要查看文档以了解详细信息）..您的 jsbin 在控制台中有错误。
如何在形状之间拖动和画线，而不是双击？