FabricJS和AngularJS - 复制和粘贴具有自定义属性的对象

Question

我在创建对象时使用了一些自定义属性。例如，在这种情况下，“名称”和“图标”：

$scope.addRoundRect = function() { 
    var coord = getRandomLeftTop(); 

    var roundrect = (new fabric.Rect({ 
     left: coord.left, 
     top: coord.top, 
     fill: '#' + getRandomColor(), 
     width: 250, 
     height: 250, 
     opacity: 1, 
     scaleX: 1, 
     scaleY: 1, 
     angle: 0, 
     rx: 10, 
     ry: 10, 
     strokeWidth: 0, 
     name: "Rounded Rectangle", 
     icon: "crop-square" 
    })); 
    canvas.add(roundrect).setActiveObject(roundrect); 
}; 

这是我的复制/粘贴功能。正如你可以看到我已经尝试粘贴相关的属性 - 卜我认为他们根本就没有与对象克隆：

function copy() { 
    canvas.getActiveObject().clone(function (cloned) { 
     _clipboard = cloned; 
    }); 
} 

function paste() { 
    _clipboard.clone(function (clonedObj) { 
     canvas.discardActiveObject(); 
     clonedObj.set({ 
      left: clonedObj.left + 10, 
      top: clonedObj.top + 10, 
      evented: true, 
      name: clonedObj.name, 
      icon: clonedObj.icon, 
     }); 
     if (clonedObj.type === 'activeSelection') { 
      clonedObj.canvas = canvas; 
      clonedObj.forEachObject(function (obj) { 
       canvas.add(obj); 
      }); 
      clonedObj.setCoords(); 
     } else { 
      canvas.add(clonedObj); 
     } 
     canvas.setActiveObject(clonedObj); 
     canvas.requestRenderAll(); 
    }); 

要长话短说：有没有办法克隆并粘贴此属性而不必修改源代码（即在JSO序列化中实现完整的自定义属性）？

Answer 1

var canvas = new fabric.Canvas('c'); 
 
var roundrect = new fabric.Rect({ 
 
    left: 50, 
 
    top: 30, 
 
    fill: 'blue', 
 
    width: 250, 
 
    height: 250, 
 
    opacity: 1, 
 
    scaleX: 1, 
 
    scaleY: 1, 
 
    angle: 0, 
 
    rx: 10, 
 
    ry: 10, 
 
    strokeWidth: 0, 
 
    name: "Rounded Rectangle", 
 
    icon: "crop-square" 
 
}); 
 
canvas.add(roundrect).setActiveObject(roundrect); 
 

 
var customProperties = 'name icon'.split(' '); 
 

 
function copy() { 
 
    canvas.getActiveObject().clone(function(cloned) { 
 
    console.log(cloned); 
 
    _clipboard = cloned; 
 
    }, customProperties); 
 
} 
 

 
function paste() { 
 
    // clone again, so you can do multiple copies. 
 
    _clipboard.clone(function(clonedObj) { 
 
    canvas.discardActiveObject(); 
 
    clonedObj.set({ 
 
     left: clonedObj.left + 10, 
 
     top: clonedObj.top + 10, 
 
     evented: true, 
 
    }); 
 
    if (clonedObj.type === 'activeSelection') { 
 
     // active selection needs a reference to the canvas. 
 
     clonedObj.canvas = canvas; 
 
     clonedObj.forEachObject(function (obj) { 
 
      canvas.add(obj); 
 
     }); 
 
     // this should solve the unselectability 
 
     clonedObj.setCoords(); 
 
    } else { 
 
     canvas.add(clonedObj); 
 
    } 
 
    canvas.setActiveObject(clonedObj); 
 
    canvas.requestRenderAll(); 
 
    console.log(clonedObj); 
 
    
 
    _clipboard = clonedObj; 
 
},customProperties); 
 
}

canvas { 
 
border: blue dotted 2px; 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<button onclick='copy()'>copy</button> 
 
<button onclick='paste()'>paste</button><br> 
 
<canvas id="c" width="400" height="400"></canvas>

object.clone接受回调函数，你要包含另一个参数的任何附加属性。你可以发送你的名字和图标作为属性来包含。

而在粘贴中，如果你这样做的话不需要克隆那个对象，确保你也发送了包含你的附加属性。