Fabric js对象与另一个对象管理答案

【问题标题】：fabric js object manage with another objectFabric js对象与另一个对象管理
【发布时间】：2018-03-30 00:47:21
【问题描述】：

我的画布有两个对象。第一个是可选的真，第二个是可选的假。我希望通过第一个对象的操作来管理第二个对象。

如果第一个对象移动，那么第二个对象需要向同一方向移动。如果第一个旋转，那么第二个在第二个的位置上以相同的角度旋转。

我尝试将事件（移动、旋转）添加到第一个可选对象，然后从第一个对象获取所需的值并将其设置为第二个对象，但旋转无法正常工作。我的代码如下：

imageOne.on('rotating', function (evt) { imageThree.angle = imageOne.getAngle(); });

【问题讨论】：

检查events。将事件（移动，旋转）添加到第一个可选对象，然后从第一个对象获取所需的值并将其设置为第二个对象。
我试过了，但旋转不能正常工作，可能是我错了，请检查我的代码。 iamgeOne.on('rotating', function (evt) { iamgethree.angle = iamgeOne.getAngle(); });

标签： fabricjs

【解决方案1】：

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

var rect2 = new fabric.Rect({
  left: 210,
  top: 60,
  fill: 'magenta',
  width: 150,
  height: 150,
  selectable: 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 rect1Move(option){
 rect2.left = this.rect2Left+ this.left - this.mousesDownLeft ;
 rect2.top = this.rect2Top+ this.top- this.mousesDownTop;
 rect2.setCoords();
}

function rect1Rotating(options){
 rect2.setAngle(this.angle);
}

register();
function register(){
 if(evented) return;
 rect1.on('moving', rect1Move);
 rect1.on('mousedown', rect1MouseDown);
 rect1.on('rotating', rect1Rotating);
 evented = true;
}
function unRegister(){
 rect1.off('moving');
 rect1.off('mousedown');
 rect2.on('rotating');
 evented = false;
}

canvas {
 border: blue dotted 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/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>

obj.setAngle()，2 版本可以使用obj.rotate() 来设置对象的角度。

【讨论】：

不错的答案。