面料js对象与另一个对象

Question

我的画布有两个对象第一个是可选的真正的第二个可选择的假。我正在通过第一个对象操作来查看第二个对象。

如果第一个移动然后第二个对象需要移动相同的方向 如果第一个旋转然后第二个在第二个位置旋转相同的角度。

Answer 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()为版本< 1.7.19和obj.rotate() 2版，角度设置为一个对象。