如何使用 Fabricjs 强制按比例缩放？

Question

Fabricjs API 中有多项更改会影响缩放点的行为方式。版本 4 (http://fabricjs.com/v4-breaking-changes) 的最新变化之一是 uniformScaling 现在是强制按比例缩放的方式。

这是我的测试canvas:

<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

这是我的简单代码片段：

const canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = true;

const Add = () => {
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: "yellow",
    width: 200,
    height: 100,
    stroke: "lightgreen",
  });
  canvas.add(rect);
  canvas.setActiveObject(rect);
};
Add();

查看 codepen 说明问题。

为什么水平和垂直调整大小的控制点还在？我做错了什么？

Answer 1

uniformScaling 属性仅确定角调整大小控件的行为。您可以使用 setControlsVisibility 方法隐藏侧边控件。

http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility

fabric.Rect.prototype.setControlsVisibility({
    ml: false,
    mt: false,
    mr: false,
    mb: false
});

如何使用 Fabricjs 强制按比例缩放？

How to force proportional scaling using Fabricjs?

fabricjs