跳转到内容

升级到 fabric 5.x

首先，现在支持的最低 Node 版本是 14。 JSDOM 依然可以在 12 版本上工作，这是进行版本升级的原因之一，但我们认为将最低版本提升至 14 是更合适的做法。

在 Fabric.js 4.x 中，出于向后兼容的考虑，一些已废弃的方法和函数被保留了。

Circle.startAngle 和 Circle.endAngle

我们从最麻烦的变化开始：Circle.startAngle 和 Circle.endAngle 现在以度数表示，而不再是弧度，这样做是为了保持一致性。

这意味着使用圆形并包含默认值的旧设计将会失效。

这是一个非常破坏性的变化，其它变化都相对简单，应该不会造成太大问题，除非项目中使用了自定义功能或覆盖了方法。

该怎么办？

解决方案有点棘手，你需要在导入 JSON 数据时附加一个“复生器”（reviver），或者覆盖 Circle.fromObject 方法来保持兼容性。

myCanvas.loadFromJSON(data,
  // callback, usually a re-render and some specific app code
  () => { myCanvas.requestRenderAll() },
  // the reviver
  (data, instance, error) => {
    // detect that version is less than 5
    if (parseInt(data.version.slice(0, 1), 10) < 5) {
      instance.startAngle = fabric.util.radiansToDegrees(data.startAngle);
      instance.endAngle = fabric.util.radiansToDegrees(data.endAngle);
    }
  },
);

Transform event removed

Those events are gone:

* @fires object:rotated at the end of a rotation transform
* @fires object:scaled at the end of a scale transform
* @fires object:moved at the end of translation transform
* @fires object:skewed at the end of a skew transform

Those events were a leftover of the control logic of 3.x and before. Do not confuse those with scaling ,rotating, moving, skewing. Those were fired at the end of a transform when some of those action occured. See them as an extra layer detail on top of object:modified.

As a side effect of this change, the canvas method _addEventOptions, private and deprecated, has been removed. The sole purpose of this method was to support this functionality.

What to do

If you need this information, you can check in the event object:modified for the action property

myRect.on('modified', (opt) => {
  // inspect action and check if the value is what you are looking for
  const action = opt.action;
});

Selection events properties

Events like selection:updated and selection:created do not have anymore the following properties:

  • updated
  • target

Those were compatibility properties left after the removal of the old events. Those properties referenced a fabric.Object.

What to do

In the same events you can look at selected and deselected properties that contains an array of events. The first item of those array is what was referenced on those properties.

Removal of deprecated methods

Object.calcCoords and Object._calcDimensionsTransformMatrix, group.realizeTransform are gone. Since we introduced different sets of coordiantes, aCoords and oCoords, the generic method calcCoords wasn’t really useful anymore. It wasn’t used internally anymore and was left to don’t disruput version 4. In the future we hope to have only aCoords.

Object._calcDimensionsTransformMatrix was handling a specific case of some transformation for the bounding boxes. Some time ago we introduced a generic utility that can do the same, calcDimensionsMatrix. _calcDimensionsTransformMatrix was deprecated and was calling calcDimensionsMatrix with the following parameters:

_calcDimensionsTransformMatrix: function(skewX, skewY, flipping) {
  return util.calcDimensionsMatrix({
    skewX: skewX,
    skewY: skewY,
    scaleX: this.scaleX * (flipping && this.flipX ? -1 : 1),
    scaleY: this.scaleY * (flipping && this.flipY ? -1 : 1)
  });
}

Similar situation for group.realizeTransform, unused in fabricJS, and not providing any functionality on top of the generic util it was calling

realizeTransform: function(object, parentMatrix) {
  fabric.util.addTransformToObject(
    object,
    parentMatrix || this.calcTransformMatrix()
  );
  return object;
},

What to do

for calcCoords, just call either calcACoords or calcOCoords when you need it. for _calcDimensionsTransformMatrix and realizeTransform, call the utility as shown in the snippet.

Paths utilis removed

Since the path semplification happened in v4.x the following utils were’t usend anymore and kept for compatibility: utils.getBoundsOfArc, utils.drawArc, utils.fromArcToBeizers, utils.drawDashedLine Those utils are now removed.

What to do

drawDashedLine, getBoundsOfArc and drawArc are removed, if you really need them, you need to copy them back in your code and maintain yourself. The interesting part utils.fromArcToBeizers is still available in fabricJS for internal use and if you need to you use it, you need to expose it on your own.