面料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版，角度設置爲一個對象。