CODEWITHSUNDEEP
fabricjs
user2455079
user2455079

Reputation: 418

Fabricjs Event stretch vs scale

Need to check if user modified image using scale (controls on corners which resizes object proportionally) or stretching (using controls top center/bottom/left/right)

canvas[index].on('object:modified', function (options) {
   ...

How can i check this?

Upvotes: 2

Views: 874

Answers (1)

Durga
Durga

Reputation: 15614

You can check using scaleX and scaleY of object. If it is corners than both scaleX and scaleY will change, if left/right only scaleX and for top/bottom scaleY will change.

DEMO

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({
 radius:50,
 left:100,
 top:100
}));
canvas.on('mouse:down',onMouseDown);
canvas.on('mouse:move',onMouseMove);
canvas.on('mouse:up',onMouseUp);
var mouseDown, target, originalState = {};
function onMouseDown(options){
  var object = options.target;
  if(!object) return;
  mouseDown = true;
  target = object;
  originalState.scaleX = object.scaleX;
  originalState.scaleY = object.scaleY;
}

function onMouseMove(options){
 if(!(mouseDown || target)) return;
 
 if(originalState.scaleX != target.scaleX && originalState.scaleY != target.scaleY){
  console.log('scale using corners');
 }
 else if(originalState.scaleX != target.scaleX){
  console.log('scale using left and right');
 }
 else if(originalState.scaleY != target.scaleY){
  console.log('scale using top and bottom');
 }
}

function onMouseUp(options){
 mouseDown = false;
 originalState = {};
 target = null;
}
canvas{
 border : 2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=400 height=400></canvas>

Upvotes: 2

Related Questions