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

Question

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

$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);
};

这是我的副本/粘贴功能。如您所见，我已经尝试粘贴相关属性 - bu我认为它们根本不被对象克隆：

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 Serialization中暗示完整的自定义属性）？

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接受回调函数和您要包含的任何其他属性作为另一个参数。您可以将姓名和图标作为属性发送。

，在粘贴中，您不需要克隆该对象，请确保在其中发送您包括您的其他属性。