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

Question

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

我使用此代码实现了这一目标：

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

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

Answer 1

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

Answer 2

这是如何解决的

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();
}

Answer 3

分组和轮换小组对我而言效果不佳。这是另一个基于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()
},

Answer 4

FabricJS旋转所有内容并保持相对位置。

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