Fabric.js link/unlink 2 objets

Question

J'ai 2 objets rectangles que j'utilise comme modèle de fond. Les contrôles sont désactivés, ils peuvent simplement être déplacés sur le canevas. Je voudrais qu'ils se comportent comme un groupe: quand l'un d'eux est sélectionné, l'autre l'est aussi pour qu'ils puissent être déplacés seulement ensemble. Je ne veux pas les regrouper, principalement parce qu'à l'exportation, je dois en supprimer un et je n'arrive pas à le faire ... (à moins qu'il n'y ait un moyen simple de sélectionner un élément dans un groupe mais aucun groupe. item(). remove(), ni les fonctions de dégrouper mes articles ou semble fonctionner sur ma fonction d'exportation)

Answer 1

var canvas = new fabric.Canvas('c'); 
 
var evented = false; 
 
var rect1 = new fabric.Rect({ 
 
    left: 50, 
 
    top: 30, 
 
    fill: 'blue', 
 
    width: 150, 
 
    height: 150, 
 
    hasBorders:false, 
 
    hasControls:false 
 
}); 
 

 
var rect2 = new fabric.Rect({ 
 
    left: 210, 
 
    top: 30, 
 
    fill: 'magenta', 
 
    width: 150, 
 
    height: 150, 
 
    hasBorders:false, 
 
    hasControls:false 
 
}); 
 
canvas.add(rect1,rect2); 
 

 
function rect1MouseDown(option){ 
 
this.mousesDownLeft = this.left; 
 
this.mousesDownTop = this.top; 
 
this.rect2Left = rect2.left; 
 
this.rect2Top = rect2.top; 
 
} 
 

 
function rect1MouseMove(option){ 
 
rect2.left = this.rect2Left+ this.left - this.mousesDownLeft ; 
 
rect2.top = this.rect2Top+ this.top- this.mousesDownTop; 
 
rect2.setCoords(); 
 
} 
 

 
function rect2MouseDown(option){ 
 
this.mousesDownLeft = this.left; 
 
this.mousesDownTop = this.top; 
 
this.rect1Left = rect1.left; 
 
this.rect1Top = rect1.top; 
 
} 
 

 
function rect2MouseMove(option){ 
 
rect1.left = this.rect1Left+ this.left - this.mousesDownLeft ; 
 
rect1.top = this.rect1Top+ this.top- this.mousesDownTop; 
 
rect1.setCoords(); 
 
} 
 
register(); 
 
function register(){ 
 
if(evented) return; 
 
rect1.on('moving', rect1MouseMove); 
 
rect1.on('mousedown', rect1MouseDown); 
 
rect2.on('moving',rect2MouseMove); 
 
rect2.on('mousedown',rect2MouseDown); 
 
evented = true; 
 
} 
 
function unRegister(){ 
 
rect1.off('moving'); 
 
rect1.off('mousedown'); 
 
rect2.off('moving'); 
 
rect2.off('mousedown'); 
 
evented = false; 
 
}

canvas { 
 
border: blue dotted 2px; 
 
}

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

vous pouvez également choisir gauche et en haut à un autre objet tout en se déplaçant un, Donc, quand vous déplacez un objet en fonction de cette position, positionnez-vous pour le repos.