如何在Raphael.js中使用線連接兩個SVG元素

Question

我知道已經有一些關於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

Answer 1

您可以使用line（）方法或作為path（）繪制一條線。 您似乎想知道path方法，因此可以做到這一點。

您需要考慮將線條繪制到的位置，我將通過選擇對象的中心來實現，因此它可以使用任何形狀。

我們將設置一個處理程序，因此在dblclick（）上選擇一個對象

x.dblclick( addLine )

然后是一個函數來實際添加路徑。

首先，我們獲得Raphael提供的兩個邊界框，該邊界框提供元素的中心（請注意，本機的getBBox方法僅提供x，y，width，height，而Raph提供了一些額外的位）。

然后我們創建新路徑，

M =移至L =移至

因此，我們將M移至我們要開始繪制的點（元素1的中心），然后將L線向L移到另一個元素的中心。

將元素拖出，然后雙擊2個元素以在它們之間繪制一條線

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個元素

同樣，您也可以只使用直線而不是路徑。

您可以通過在元素之前插入insertBehind來隱藏線的中心，以使其顯示在“頂部”

如果將元素拖動到行后，它不會移動，則需要將其編碼為拖動處理程序的一部分，以更新路徑或行（某些庫為您執行此操作）。

如何在Raphael.js中使用線連接兩個SVG元素

問題描述

1 個解決方案

解決方案1
1 2015-07-05 12:11:55

如何在Raphael.js中使用線連接兩個SVG元素

問題描述

1 個解決方案

解決方案1 1 2015-07-05 12:11:55

解決方案1
1 2015-07-05 12:11:55