Question

在fabricjs中旋转图像时，左上角的坐标未更新意味着即使在旋转之后，图像的左上角仍然指向相同的角点。但是它应该重新计算顶部左角基于图像的当前位置。无论如何，我能做到这一点？感谢任何帮助！

以下是图像轮换的代码：

function rotate(){    
    activeCanvas.forEachObject(function(obj){
        if(obj instanceof fabric.Image){
            curAngle = obj.getAngle();
            obj.setAngle(curAngle-90);            
        }
    });
    activeCanvas.renderAll();
}

现在旋转后，我想要新旋转图像的左上角坐标，但它仍然会返回左上角和左上角的旧图像状态。

例如，假设图像的左上角最初位于（100,200），图像的尺寸为500x600。现在如果我旋转图像，图像的尺寸变为600x500，左上角变为但是，fabricjs图像仍然指的是旧的左上角。所以有任何方法就像setCoords（）使用哪个图像引用新的左上角点作为其左上角？

Answer 1

从下面的代码片段中可以看到，如果只旋转对象，只会更新边界框，则必须移动对象以更新对象的位置。

var canvas = this.__canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 120,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20
});
canvas.on("object:rotating", function() {
  var ao = canvas.getActiveObject();
  if(ao){
    console.log('top and left are the same after rotation');
    console.log('top:' + ao.top);
    console.log('left:' + ao.left);
    
    console.log('but not the bounding box');
    var bound = ao.getBoundingRect();
    console.log('bounding box - top:' + bound.top);
    console.log('bounding box - left:' + bound.left);

  }
})
canvas.add(rect);
canvas.renderAll();

Answer 2

我猜你正在寻找这样的东西：

canvas.on('object:rotating', function(options) {
  options.target.setCoords();
  var left = options.target.oCoords.tl.x,
      top = options.target.oCoords.tl.y;
  console.log(left, top);
});

使用fabricjs在旋转图像上未更新左上角坐标

2 个答案: