Question

有没有办法在fabric.js中旋转画布？

我不打算旋转每个元素，这可以轻松实现，而是旋转整个画布，类似于本机canvas元素上canvas.rotate（）所实现的方式：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);

可以使用getContext()从fabric.js访问canvas元素，但是如果我这样做然后旋转它，那么两个画布中只有一个正在旋转，选择/绘图严重关闭并且绘制/选择/ etc也不再有用了。

我在这里有些不知所措。如果fabric.js目前无法实现这一点，我将在github上创建一张票，但不知怎的感觉应该可能......

[编辑]

在Ian输入后我发现了一些事情，我可以旋转画布并获得一些结果。但是，物体离正确位置很远。但是，这可能是因为，在旋转时，我也在缩放和绝对平移画布（使用canvas.setZoom（）和canvas.absolutePan（））。我想我会在GitHub上创建一张票，看看开发者的想法。有点困在这里......仅供参考，这里是代码片段：

setAngle: function(angle) {
    var self = this;

    var canvas = self.getFabricCanvas();
    var group = new fabric.Group();
    var origItems = canvas._objects;
    var size = self.getSize();

    group.set({width: size.width, height: size.height, left: size.width / 2, top: size.height / 2, originX: 'center', originY: 'center', centeredRotation: true})

    for (var i = 0; i < origItems.length; i++) {
        group.add(origItems[i]);
    }

    canvas.add(group);
    group.set({angle: (-1 * self.getOldAngle())});
    canvas.renderAll();
    group.set({angle: angle});
    canvas.renderAll();

    items = group._objects;
    group._restoreObjectsState();
    canvas.remove(group);

    for (var i = 0; i < items.length; i++) {
        canvas.add(items[i]);
        canvas.remove(origItems[i]);
    }

    canvas.renderAll();

    self.setOldAngle(angle);
},

如上所述，使用另外两个函数调用此函数：

setPosition: function(left, top) {
    var self = this;

    if (left < 0) {
        left = 0;
    }
    if (top < 0) {
        top = 0;
    }

    var point = new fabric.Point(left, top);
    self.getFabricCanvas().absolutePan(point);
},

setZoom: function(zoom) {
    var self = this;

    self.getFabricCanvas().setZoom(zoom);
},

通过以下代码调用这些函数：

MyClass.setZoom(1);

MyClass.setPosition(left, top);
MyClass.setZoom(zoom);
MyClass.setAngle(angle);

正如你所看到的，我尝试将角度设置为最后，但是当我这样做时，它并没有产生任何影响（至少在视觉上没有区别）。在开始时将缩放设置为1非常重要，否则平移将无法正常工作。

也许有人有想法......

Answer 1

这就是我的操作方式（基于this js fiddle的代码）。

rotate (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 by the same angle
      obj.setCoords()
  });

  canvas.renderAll()


},

完成此操作后，我还必须调整画布的背景和大小，以使对象不会脱离画布。

在fabricjs

1 个答案: