Fabric.js Link/Verknüpfung 2 Objekte

Question

Ich habe 2 Rechtecke Objekte, die ich als Hintergrundvorlage verwenden. Die Steuerelemente sind deaktiviert, sie können nur auf die Leinwand gezogen werden. Ich möchte, dass sie sich wie eine Gruppe verhalten: Wenn einer von ihnen ausgewählt wird, ist der andere auch so, dass sie nur zusammen bewegt werden können. Ich möchte sie nicht gruppieren, hauptsächlich weil ich beim Exportieren einen von ihnen entfernen muss und ich kann keinen Weg finden, dies zu tun ... (es sei denn, es gibt eine einfache Möglichkeit, einen Gegenstand in einer Gruppe auszuwählen, aber keine Gruppe. Artikel().() entfernen, weder Funktionen meine Einzelteile zu heben Sie die Gruppierung oder scheint auf meine Exportfunktion)

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>

Alternativ Sie links und oben auf ein anderes Objekt kann zu arbeiten, während ein sich bewegendes, Wenn Sie also ein Objekt entsprechend dieser Position bewegen, stellen Sie die Position für die Ruhe ein.