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

如果您这样做，则无需在粘贴中克隆该对象，请确保您还发送了包含您的其他属性。