使用fabricjs在旋转图像上未更新左上角坐标 [英] Top-Left coordinates not updated on rotating image using fabricjs

问题描述

当我在fabricjs中旋转图像时，旋转后不会更新左上角的坐标.而是，图像的左上角仍然指向旧点.我相信它应该根据图像的新位置重新计算左上角.有没有办法做到这一点?感谢您的帮助！

When I rotate an image in fabricjs, the top-left corner's coordinates are not updated after rotated. Instead, the top-left corner of the image still refers to the old point. I believe that it should recalculate the top-left corner based on the image's new position. Is there a way to achieve this? Any help is appreciated!

下面是图像旋转的代码:

Below is the code for image rotation:

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

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

Now, after the rotation, I want top-left coordinates of the new rotated image but it still returns top and left from the old image state.

例如，假设图像的左上角最初位于(100,200)，图像的尺寸为500x600.现在，如果我将图像旋转90度，则新尺寸为600x500，并且随着图像相对于其中心旋转，左上角也会发生变化.但是fabricjs图像仍然指向旧的左上角.像setCoords()一样，有什么方法可以将新的左上角点作为左上角?

For example, let say the image's top-left corner was originally at (100,200) and the image's dimensions are 500x600. Now, if I rotate the image in 90 degrees, the new dimensions are 600x500 and the top-left corner changes as well, as the image is rotated related to its center. But the fabricjs image still refers to the old top-left corner. Is there any method just like setCoords() to get the new upper left corner point as its top left?

推荐答案

如下面的代码片段所示，如果仅旋转对象，则只会更新边界框，您必须移动对象才能具有对象的位置已更新.

As you can see from the snippet below, if you only rotate your object, only the bounding box will be updated, you have to move your object to have the position of your object updated.

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

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script>
<canvas id="c" style="border:1px solid black"></canvas>

这篇关于使用fabricjs在旋转图像上未更新左上角坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！