如何使用 Fabric.js 一次旋转画布的所有对象？答案

【问题标题】：How to rotate all objects of canvas at once using Fabric.js?如何使用 Fabric.js 一次旋转画布的所有对象？
【发布时间】：2020-08-30 12:24:17
【问题描述】：

我正在开发使用 Fabric.js 的定制产品设计器。我想通过按一个按钮一次旋转画布的所有对象（向左旋转，向右旋转）。

我已经使用这个代码实现了这一点：

stage.forEachObject(function(obj){
    obj.setAngle(rotation).setCoords();
  });
  stage.renderAll();

但它有一个错误，即每个元素都以自己的中心点旋转。我希望每个元素都相对于整个画布元素旋转。

【问题讨论】：

标签： html fabricjs

【解决方案1】：

您可以将所有对象添加到一个组中，然后旋转该组。这样你也可以设置旋转中心。

【讨论】：

感谢您的回复，您能否分享如何使用我的画布上的所有对象创建组的代码，因为用户可以创建任意数量的对象。

【解决方案2】：

分组和轮换组对我来说效果不佳。这是基于this js fiddle的另一种解决方案。

rotateAllObjects (degrees) {

  let canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2) // center of canvas
  let radians = fabric.util.degreesToRadians(degrees)

  canvas.getObjects().forEach((obj) => {
      let objectOrigin = new fabric.Point(obj.left, obj.top)
      let new_loc = fabric.util.rotatePoint(objectOrigin, canvasCenter, radians)
      obj.top = new_loc.y
      obj.left = new_loc.x
      obj.angle += degrees //rotate each object buy the same angle
      obj.setCoords()
  });

  canvas.renderAll()
},

【讨论】：

【解决方案3】：

这样可以解决

function rotate(a) {
                var group = new fabric.Group(canvas.getObjects());

                //angle is var with scope out of this function, 
                //so you can use this function as rotate(90) and keep rotating
                angle = (angle + a) % 360;
                group.rotate(angle);

                canvas.centerObject(group);
                group.setCoords();
                canvas.renderAll();
}

【讨论】：

新的面料组应该有坐标

【解决方案4】：

FabricJS 旋转一切并保持相对位置。

您可以在此处下载文件 - https://drive.google.com/file/d/1UV1nBdfBk6bg9SztyVoWyLJ4eEZJgZRf/view?usp=sharing

【讨论】：