CODEWITHSUNDEEP
fabricjs
Anish Manchappillil
Anish Manchappillil

Reputation: 735

fabric js object manage with another object

My canvas has two objects. The first one is selectable true and the second one is selectable false. I am looking to manage the second object through the first object's action.

If the first object moves, then the second objects need to move in the same direction. If the first one rotates, then the second one rotates at the same angle in the second one's position.

I have tried adding events (moving,rotating) to the first selectable object, and then getting the required values from the first object and setting it to second object, but rotating is not working properly. My code is as follows:

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

Upvotes: 3

Views: 1843

Answers (1)

Durga
Durga

Reputation: 15614

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>

You can use obj.setAngle() for version <1.7.19 and obj.rotate() for version 2 , to set angle to an object.

Upvotes: 5

Related Questions