Svg Raphaeljs：复制元素或将其设置为其他纸张

是否可以将一张图纸中存在的元素或集合添加到另一张图纸中，而不必从头创建每个元素两次

---

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

Raphael不允许将元素直接从一篇论文移动到另一篇论文。 因此，最好在目标图纸中创建具有相同属性的新元素。 我创建了以下示例方法。您可以在页面中添加代码，并使用clonetopper函数将元素或集合克隆到另一张图纸

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

函数提取JSON（元素）{
var attr=element.attr（），
newNodeJSON={type:element.type}，
钥匙
for（输入属性）{
newNodeJSON[key]=attr[key]；
}
返回newNodeJSON；
}
/*
*@param{Object}元素：raphael元素或集合
*@param{Object}paper:要克隆的目标纸张
*@return{object}：新创建的集合或元素
*/
功能ClonetOpper（元件、纸张）{
var isSet=element.type=='set'，
elementJSONArr=[]，
i、 新闻网；
如果（isSet）{
ln=element.items.length；
对于（i=0；i

拉斐尔不允许将元素从一张纸直接移动到另一张纸。 因此，最好在目标图纸中创建具有相同属性的新元素。 我创建了以下示例方法。您可以在页面中添加代码，并使用clonetopper函数将元素或集合克隆到另一张图纸

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

函数提取JSON（元素）{
var attr=element.attr（），
newNodeJSON={type:element.type}，
钥匙
for（输入属性）{
newNodeJSON[key]=attr[key]；
}
返回newNodeJSON；
}
/*
*@param{Object}元素：raphael元素或集合
*@param{Object}paper:要克隆的目标纸张
*@return{object}：新创建的集合或元素
*/
功能ClonetOpper（元件、纸张）{
var isSet=element.type=='set'，
elementJSONArr=[]，
i、 新闻网；
如果（isSet）{
ln=element.items.length；
对于（i=0；i

以下代码集为Raphael集合和Raphael元素添加了nw函数。其用法是对任何集合或元素调用

.clonetopper（targetPaper）

（函数（R）{
var cloneSet；//缓存集克隆函数以进行优化
/**
*将拉斐尔元素从一张纸复制到另一张纸
*     
*@param{Paper}targetPaper是此元素所指向的纸张
*必须被克隆
*
*@return Raphaelement
*/
R.el.ClonetOpper=功能（目标纸）{
返回（！this.removed）&&
targetPaper[this.type]（）.attr（this.attr（））；
};
/**
*拉斐尔从一张纸复制到另一张纸
*     
*@param{Paper}targetPaper是此元素所指向的纸张
*必须被克隆
*
*@return RaphaelSet
*/
R.st.ClonetOpper=功能（目标纸张）{
targetPaper.setStart（）；
this.forEach（cloneSet | |）（cloneSet=function（el）{
el.Clonetopper（目标纸）；
}));
返回targetPaper.setFinish（）；
};
}（拉斐尔）；

对于示例实现，您可以查看以下内容：

请注意，如果源元素上有事件，它们将不会克隆到目标图纸

---

以下代码集将nw函数添加到Raphael集合和Raphael元素中。其用法是对任何集合或元素调用

.clonetopper（targetPaper）

（函数（R）{
var cloneSet；//缓存集克隆函数以进行优化
/**
*将拉斐尔元素从一张纸复制到另一张纸
*     
*@param{Paper}targetPaper是此元素所指向的纸张
*必须被克隆
*
*@return Raphaelement
*/
R.el.ClonetOpper=功能（目标纸）{
返回（！this.removed）&&
targetPaper[this.type]（）.attr（this.attr（））；
};
/**
*拉斐尔从一张纸复制到另一张纸
*     
*@param{Paper}targetPaper是此元素所指向的纸张
*必须被克隆
*
*@return RaphaelSet
*/
R.st.ClonetOpper=功能（目标纸张）{
targetPaper.setStart（）；
this.forEach（cloneSet | |）（cloneSet=function（el）{
el.Clonetopper（目标纸）；
}));
返回targetPaper.setFinish（）；
};
}（拉斐尔）；

对于示例实现，您可以查看以下内容：

请注意，如果源元素上有事件，它们将不会克隆到目标图纸

---

谢谢你，这很有魅力。但它似乎不适用于嵌套集，是吗？谢谢，这就像一个魅力。但它似乎不适用于嵌套集，是吗？