fabric js objet gâcher avec un autre objet

Question

Ma toile a deux objet premier est sélectionnable vrai et un deuxième sélectionnable faux. Je regarde le deuxième objet de mange à travers la première action d'objet.

Si le premier bouge, alors les deuxièmes objets doivent bouger dans la même direction si le premier tourne, alors le second tourne le même angle dans la deuxième position.

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>

Vous pouvez utiliser obj.setAngle() pour la version 1.7.19 et < obj.rotate() pour la version 2, pour définir l'angle d'un objet.