Question

我有2个矩形对象，我用作背景模板。控件被禁用，它们只能被拖到画布上。我希望他们表现得像一个团体：当他们中的一个被选中时，另一个也是如此，他们只能一起移动。我不想将它们分组，主要是因为在导出时，我需要删除其中一个，我找不到办法做到这一点......（除非有一种简单的方法来选择组中的项目但是group.item（）。remove（），既不能解组我的项目，也不适用于我的导出功能）

Answer 1

＆＃13;

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

＆＃13;

canvas {
 border: blue dotted 2px;
}

＆＃13;

<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>

＆＃13;

或者你可以在移动一个物体的同时将左侧和顶部设置为另一个物体，所以当你根据该位置设置的位置移动一个物体时，就可以了。

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

1 个答案: