FabricJS et AngularJS - copier et coller un objet avec un attribut personnalisé

Question

J'utilise des attributs personnalisés lorsque je crée mes objets. Par exemple dans ce cas "nom" et "icône":

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

Ceci est ma fonction Copier/Coller. Comme vous pouvez le voir, je l'ai déjà essayé de coller les attributs pertinents - bu, je pense qu'ils sont tout simplement pas clonés avec l'objet:

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

Pour faire court: est-il un moyen de cloner et coller également cet attribut sans avoir à modifier la source (c'est-à-dire implémenter un attribut personnalisé à part entière dans la sérialisation 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 accepte la fonction de rappel et toute propriété supplémentaire que vous souhaitez inclure un autre paramètre. Vous pouvez envoyer votre nom et votre icône en tant que propriétés à inclure.

Et en pâte vous n'avez pas besoin de cloner cet objet si vous le faites, assurez-vous qu'il y a aussi des propriétés supplémentaires.