Fabric.js链接/取消链接2对象

Question

我有2个矩形对象，我用作背景模板。控件被禁用，它们可以被拖动到画布上。我希望他们表现得像一个群体：当他们中的一个被选中时，另一个也是如此，因此他们只能一起移动。我不想将它们分组，主要是因为在出口时，我需要删除其中的一个，并且我找不到这样做的方法......（除非有一种简单的方法来选择组中的项目，但不是组。项目（）。remove（）方法，无论是功能取消组合我的项目或似乎在我的导出功能正常工作）

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>

另外，您可以在移动一个设置左，上到另一个对象，所以只要你按照该位置移动一个物体设定位置休息。