如何使用 FabricJS 通过角点非均匀地调整对象大小？

1. 简介

FabricJS 是一个强大的 JavaScript 库，可以用于创建交互式图形设计应用和媒体应用程序。它具有很多的功能，其中之一就是可以通过角点非均匀地调整对象大小。本文将介绍如何使用 FabricJS 实现这一功能。

2. FabricJS 能做什么

FabricJS 可以做很多事情，例如绘制基本图形，包括矩形、圆形、三角形和多边形，以及高级图形，如曲线和贝塞尔曲线。它还可以轻松处理文本，包括自动换行和多行文本。同时，FabricJS 还具备很多高级功能，如图层的管理、自由变换、事件处理等，在这些功能中，可以通过角点非均匀地调整对象大小。

3. 如何使用 FabricJS 调整对象大小

在 FabricJS 中，可以使用鼠标或触摸屏幕来调整对象的大小。默认情况下，在对象的角点和边缘都可以调整大小和形状。

3.1 角点调整大小

如果只想在对象的角点调整大小，可以使用下面的代码：

canvas.on({

  'object:selected': function(e) {
    e.target.setControlsVisibility({
      mt: false,
      mb: false,
      ml: false,
      mr: false,
      tl: true,
      tr: true,
      bl: true,
      br: true,
    });
  }
});

这段代码中，我们在 canvas 上添加了事件监听器 'object:selected'，该事件对应选中对象时触发。在事件处理器中，我们获取选中对象 e.target，并设置它的控制点（即角点和边缘）的可见性。在这里，我们将控制点的左上角（tl）、右上角（tr）、左下角（bl）和右下角（br）设置为可见，上下左右的中间点（mt、mb、ml 和 mr）设置为不可见。

3.2 非均匀调整大小

如果想要实现非均匀的调整大小，可以使用 FabricJS 所提供的 scaleToWidth 和 scaleToHeight 方法来实现。

canvas.on({

  'object:scaling': function(e) {
    var obj = e.target;
    obj.setCoords();
    if (obj.scaleX !== obj.oldScaleX) {
      obj.set({
        oldScaleX: obj.scaleX
      });
      var zoomRatio = obj.scaleX / obj.oldScaleX;
      obj.set({
        width: obj.width * zoomRatio,
        height: obj.height * zoomRatio,
      });
    }
  }
});

这种方式是通过统计缩放比例，对宽度和高度进行非均匀的缩放实现的。在这段代码中，我们首先获取选中对象并设置它的坐标。之后，在对象发生缩放事件时，获取对象的比例值 zoomRatio，并根据这个值更新对象的宽度和高度。

4. 总结

FabricJS 是一个非常优秀的图形库，能够方便地创建交互式图形设计应用和媒体应用程序。在这篇文章中，我们介绍了如何使用 FabricJS 实现 non-uniform resizing，并提供了相关的代码示例。希望这篇文章对您有所帮助。