Top-Left coordinates not updated on rotating image using 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.

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?

回答1:

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>

回答2:

I guess you are looking for something like this:

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

来源：https://stackoverflow.com/questions/40840063/top-left-coordinates-not-updated-on-rotating-image-using-fabricjs

标签

fabricjs