为什么此代码在 Fabric js 版本 3.6.6 中有效，但在 4.3.1 中无效？答案

【问题标题】：Why does this code work in Fabric js version 3.6.6 but not in 4.3.1?为什么此代码在 Fabric js 版本 3.6.6 中有效，但在 4.3.1 中无效？
【发布时间】：2021-08-16 10:12:52
【问题描述】：

我正在使用 Fabric js，我有一个带矩形的画布，并希望限制它们在画布边界之外缩放。我的代码在 3.6.6 版中可以使用，但在 4.3.1 版中不行。代码完全相同。在fabric js 的更新日志中，我找不到与我的问题相关的任何内容。

是否有人可以解释为什么它在 4.3.1 版本中不起作用？

问题在于，在较新的版本中，当缩放到其中一个边框时，矩形在缩放到相反的边框时受到限制。例如;当您将矩形拖到中心然后将其缩放到右边框时，您无法将其缩放到左边框。

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;
  }
}

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

升级到最新的fabric.js 4.5.0版，它会再次工作。

此问题是由于 Fabric.js 版本 4.3.0 中引入的错误导致object:scaling 事件被过早触发。 (https://github.com/fabricjs/fabric.js/pull/6650)

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

【讨论】：