添加自定義remove方法拉斐爾JS Graffle連接

我使用的是自定義的連接方法（Raphael.fn.connection）在本例中加在發現：raphaeljs.com/graffle.html添加自定義remove方法拉斐爾JS Graffle連接

我的例子是在這裏： http://jsfiddle.net/WwT2L/（在顯示窗口中滾動以查看效果）

基本上，我已將鏈接連接與氣泡關聯，以便在縮放時與它保持一致。我希望當用戶滾動到某個點時，我可以將連接切換到下一個泡泡。

要做到這一點，我想我會刪除連接，並添加另一個，但由於連接方法不是本地拉斐爾元素，它沒有內置的刪除方法，我有麻煩將刪除方法添加到原型。

我發現了有關此google group discussion 添加自定義方法的一些信息，我已經試過：

this.connections [0] = this.r.connection（this.bubbles [0]，這個。單元連接器，「#fff」，「#fff」）.__proto__. remove = function（）{alert（'working custom method'）;};

它似乎向這個連接實例添加一個方法，但我不知道該怎麼做該方法，它似乎應該有一個更好的方法。

來源

2011-04-08 uijake

回顧一下......當我們創建一個連接，我們經常使用以下命令：

connections.push(
    r.connection(r.getById(firstObjectId), r.getById(secondObjectId), '#fff') 
);

我們在這裏所做的是推（添加）一個Raphael.connections對象到connections[]陣列，基於其Raphael對象ID的

將方法/函數添加到Raphael，一個可以使用：

Raphael.fn.fnName = function(){ /* Your code here */ }

這會在我們的Raphael名稱空間中創建一個函數，以用於我們的Raphael對象。

下面是我創建的代碼，它完全符合你的要求。我找不到Raphael的優秀資源，但一定會很快創建，因爲我已經做了大量的開發。

Raphael.fn.removeConnection = function (firstObjectId, secondObjectId) { 
    for (var i = 0; i < connections.length; i++) { 
     if (connections[i].from.id == firstObjectId) { 
      if (connections[i].to.id == secondObjectId) { 
       connections[i].line.remove(); 
       connections.splice(i, 1); 
      } 
     } 
     else if (connections[i].from.id == secondObjectId) { 
      if (connections[i].to.id == firstObjectId) { 
       connections[i].line.remove(); 
       connections.splice(i, 1); 
      } 
     } 
    } 
};

就像創建連接一樣，提供了兩個id。我們必須在我們推送每個連接所設置的連接數組中找到這些ID。如果只有一個連接，則不需要數組遍歷，儘管遇到這種情況較少。

這裏有兩種可能的情況 - 不包括爲簡單起見沒有找到連接的情況。它要麼發現：

連接對象from.id對應於第一個提供的參數firstObjectId。然後，to對應於第二個提供的參數secondObjectId。
連接對象from.id對應於第一個提供的參數secondObjectId。然後，to對應於第二個提供的參數firstObjectId。

檢查的這個方法適用於我們所有的基地，所以不管如何建立連接的互動與（在我的情況下，用戶點擊兩個對象將它們連接，並刪除它們的連接）

一旦我們確認我們有兩個正確的對象，然後我們從DOM中刪除該行，使用connections[i].line.remove();作爲剛剛從陣列中移除連接對象將它留在地圖上。

最後，我們從數組中刪除指定的連接對象，並且所述拼接方法留給我們的未聖陣列（我們的陣列中沒有孔，即;）），使用connections.splice(i, 1);

然後，

來源

2012-02-29 21:17:06 iRedMedia

這就是我用來從連接數組中刪除連接的數組，並且到目前爲止我沒有任何問題。這個問題可能很古老，但我偶然發現了搜索相關的解決方案，所以當我沒有運氣時，我創建了我的，並想與世界其他地方分享。

//checks if the current object has any relation with any other object 
    //then remove all the to and from connections related to current object    
      for(var i =0 ; i<connections.length; i++){ 
       if(connections[i].from.id == objectId || connections[i].to.id ==objectId){ 
        connections[i].line.remove(); 

       } 
      } 

    //finds out which connections to remove from array and updates connections array 
      connections = $.grep(connections, function(el){ 
       return el.line.paper != null; 
      })

拼接方法具有我的情況下的問題，就好像對象具有一個以上的連接（到，從）與多個對象和我使用拼接每次主連接陣列長度被改變以及值我越來越多，所以我使用jQuery grep方法來更新數組基於刪除的行。我希望這也能幫助其他人。

來源

2014-04-24 06:39:10

function removeShape(shape) { 
    //CONNECTIONS is my global structure. 

    var connections = []; 

    while (CONNECTIONS.length) { 
     var connection = CONNECTIONS.pop(); 

     if (connection.from.id == shape.id || connection.to.id == shape.id) 
      connection.line.remove(); 
     else 
      connections.push(connection); 
    } 

    shape.remove(); 

    CONNECTIONS = connections; 
}

來源

2014-10-01 22:55:21 user2648733

添加自定義remove方法拉斐爾JS Graffle連接

回答

相關問題