Raphaeljs：複製元素或設置爲另一個紙張

Question

是否有可能將紙張中存在的元素或集合添加到另一個紙張，而無需從頭開始創建每個元素兩次？

背景爲此：我想象一個大節點圖，並希望在一篇獨立的論文中創建一個「總覽圖」。

Answer 1

Raphael不允許將元素從一個紙張直接移到另一個紙張。 因此，最好在目標文件中創建一個具有相同屬性的新元素。 我已經創建了下面的示例方法。您可以將代碼添加到頁面中，並使用cloneToPaper函數將一個元素或一個集合克隆到另一個紙張。

function extractJSON(element) { 
    var attr = element.attr(), 
    newNodeJSON = {type: element.type}, 
    key; 
    for (key in attr) { 
     newNodeJSON[key] = attr[key]; 
    } 
    return newNodeJSON; 
} 
/* 
* @param {Object} element: raphael element or set 
* @param {Object} paper: Target paper where to clone 
* @return {object}: newly created set or element 
*/ 
function cloneToPaper(element, paper) { 
    var isSet = element.type === 'set', 
    elementJSONArr = [], 
    i, ln, newSet; 

    if (isSet) { 
     ln = element.items.length; 
     for (i = 0; i < ln; i += 1) { 
      elementJSONArr.push(extractJSON(element.items[i])); 
     } 
    } 
    else { 
     elementJSONArr.push(extractJSON(element)); 
    } 
    newSet = paper.add(elementJSONArr); 
    return isSet ? newSet : newSet[0]; 
} 

Answer 2

下面這組代碼向Raphael Set和Raphael Elements添加了一個nw函數。用法是簡單地在任何集合或元素上調用.cloneToPaper(targetPaper)。

(function (R) { 
    var cloneSet; // to cache set cloning function for optimisation 

    /** 
    * Clones Raphael element from one paper to another 
    *  
    * @param {Paper} targetPaper is the paper to which this element 
    * has to be cloned 
    * 
    * @return RaphaelElement 
    */ 
    R.el.cloneToPaper = function (targetPaper) { 
     return (!this.removed && 
      targetPaper[this.type]().attr(this.attr())); 
    }; 

    /** 
    * Clones Raphael Set from one paper to another 
    *  
    * @param {Paper} targetPaper is the paper to which this element 
    * has to be cloned 
    * 
    * @return RaphaelSet 
    */ 
    R.st.cloneToPaper = function (targetPaper) { 
     targetPaper.setStart(); 
     this.forEach(cloneSet || (cloneSet = function (el) { 
      el.cloneToPaper(targetPaper); 
     })); 
     return targetPaper.setFinish(); 
    }; 
}(Raphael)); 

有關示例實現，你可以看看這個小提琴：http://jsfiddle.net/shamasis/39yTS/

請注意，如果您對源元素的事件，他們將不會被克隆到目標文件。