svg - Raphaeljs：复制元素或设置到另一张纸上

Question

是否有可能将一篇论文中存在的元素或集合添加到另一篇论文中，而无需从头开始创建每个元素两次？

背景：我将一个大型节点图可视化，并希望在另一篇论文中创建一个“概览图”。

Answer 1

下面的代码集为 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/

请注意，如果您在源元素上有事件，它们将不会被克隆到目标文件。

Answer 2

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];
}