如何使用 FabricJS 设置矩形的旋转角度？

什么是 FabricJS？

FabricJS 是一个 JavaScript 库，用于处理 HTML5 canvas 上的对象，它提供了丰富的功能。可以使用 FabricJS 创建图像、路径、矩形、附加文本、多边形等，还可以使用 FabricJS 处理图像过滤器、变换、声明、动画效果等。FabricJS 也是开源的，所以它可以被开发人员使用。

如何在 FabricJS 中旋转矩形？

在 FabricJS 中旋转矩形非常简单。下面是一个基本的示例：

// 创建 canvas 对象
var canvas = new fabric.Canvas('canvas');
// 创建矩形对象
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});
// 向 canvas 添加矩形对象
canvas.add(rect);
// 将矩形旋转 45 度
rect.set('angle', 45);

在上面的代码中，首先创建了一个 FabricJS canvas 对象。然后创建了一个矩形对象并将其添加到 canvas 中。最后，使用 set() 方法设置矩形对象的旋转角度。

通过用户输入旋转角度

还可以通过用户输入的值来旋转矩形。下面是一个基本示例：

function rotateRect() {
  var angle = parseFloat(document.getElementById('angle').value, 10) || 0;
  rect.set('angle', angle).setCoords();
  canvas.renderAll();
}

在上面的代码中，创建了一个名为“rotateRect”的函数，用于旋转矩形。该函数首先从 HTML 表单中获取用户输入的值，然后使用 set() 方法设置矩形对象的旋转角度。最后，使用 renderAll() 方法更新 canvas。

通过鼠标拖动旋转矩形

还可以使用鼠标拖动来旋转矩形。下面是一个示例：

var lastPosX, lastPosY;
// 监听 mousedown 事件
rect.on('mousedown', function(options) {
  lastPosX = options.e.clientX;
  lastPosY = options.e.clientY;
});
// 监听 mousemove 事件
rect.on('mousemove', function(options){
  if(options && options.e){
    var currentPosX = options.e.clientX,
        currentPosY = options.e.clientY,
        angle = Math.atan2(currentPosY - lastPosY, currentPosX - lastPosX);
    // 将角度转换为弧度
    angle = angle * 180 / Math.PI;
    rect.setAngle(angle).setCoords();
    canvas.renderAll();
    lastPosX = currentPosX;
    lastPosY = currentPosY;
  }
});

在上面的代码中，通过监听 mousedown 事件获取鼠标当前位置的坐标，然后监听 mousemove 事件计算角度并且旋转矩形。最后使用 setAngle() 方法设置角度并更新画布。

总结

在这篇文章中，我们学习了如何在 FabricJS 中设置矩形的旋转角度。我们学习了从用户输入旋转角度和通过鼠标拖动旋转矩形等不同的方法。现在您可以在自己的项目中添加此功能并创造出更有趣的图形。