CODEWITHSUNDEEP
javascriptcanvasfabricjs
Marcel
Marcel

Reputation: 438

Why does this code work in Fabric js version 3.6.6 but not in 4.3.1?

I am using Fabric js, where I have a canvas with rectangles, and want them to be restricted in scaling outside the borders of the canvas. The code I have does work in version 3.6.6, but not in 4.3.1. The code is exactly the same. In the changelog of fabric js I cant find anything related to my issue.

Is there somebody who can maybe explain why it does not work in the 4.3.1 version?

The problem is that in the newer version the rectangle is restricted in scaling to the opposite border, when scaled to one of the borders. For example; when you drag the rectangle to the center and then scale it to the right border, you cant scale it to the left border.

This is the 3.6.6 version where it does work

This is the 4.3.1 version where it does not work

function scaling(e) {
  let shape = e.target;
  let maxWidth = shape.canvas.width;
  let maxHeight = shape.canvas.height;

  //left border
  if(shape.left < 0) {
    shape.left = scalingProperties.left;
    shape.scaleX = scalingProperties.scaleX
  } else {
    scalingProperties.left = shape.left;
    scalingProperties.scaleX = shape.scaleX;
  }

  //right border
  if((scalingProperties.scaleX * shape.width) + shape.left >= maxWidth) {
    shape.scaleX = (maxWidth - scalingProperties.left) / shape.width;
  } else {
    scalingProperties.scaleX = shape.scaleX;
  }

  //top border
  if(shape.top < 0) {
    shape.top = scalingProperties.top;
    shape.scaleY = scalingProperties.scaleY;
  } else {
    scalingProperties.top = shape.top;
    scalingProperties.scaleY = shape.scaleY;
  }

  //bottom border
  if((scalingProperties.scaleY * shape.height) + shape.top >= maxHeight) {
    shape.scaleY = (maxHeight - scalingProperties.top) / shape.height;
  } else {
    scalingProperties.scaleY = shape.scaleY;
  }
}

Upvotes: 0

Views: 376

Answers (1)

melchiar
melchiar

Reputation: 2862

Upgrade to the latest fabric.js version 4.5.0 and it will work again.

This issue is due to a bug introduced in Fabric.js version 4.3.0 that caused the object:scaling event to be triggered too soon. (https://github.com/fabricjs/fabric.js/pull/6650)

https://jsfiddle.net/melchiar/5f8apxno/

Upvotes: 2

Related Questions