javascript - fabricjs, efter att ha roterat objektet är det möjligt att få vänster, topp och höger position för den virtuella rektangeln

Efter att ha roterat objektet, är det möjligt att få vänster, topp och höger position av den virtuella rektangeln?

Svar #1

Det du letar efter är begränsningsrektangeln för ditt objekt:

getBoundingRect(ignoreVpt) → {Object} Returnerar koordinater för objektets begränsande rektangel (vänster, topp, bredd, höjd). Rutan är avsedd att vara justerad efter canvasens axel.

Returnerar: Objekt med egenskaperna left, top, width, height Typ Objekt

referens: fabricjs källkod

var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var rect = new fabric.Rect({
  left: 120,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20
});

canvas.on('after:render', function() {
  canvas.contextContainer.strokeStyle = '#555';
  canvas.forEachObject(function(obj) {
    var bound = obj.getBoundingRect(); // <== this is the magic
    console.log(bound);
    canvas.contextContainer.strokeRect(
      bound.left,
      bound.top,
      bound.width,
      bound.height
    );

  });

});
canvas.add(rect);

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>

Eftersom after:render-händelsen utlöses kontinuerligt efter att varje bildruta har renderats kan du se den uppdaterade begränsningsrutan för ditt objekt vid varje uppdatering, i position, rotation och dimensioner.

var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var rect = new fabric.Rect({
  left: 120,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20
});
canvas.add(rect);
canvas.on('after:render', function() {
  canvas.contextContainer.strokeStyle = '#555';
  var ao = canvas.getActiveObject();
  if (ao) {
    var bound = ao.getBoundingRect();

    canvas.contextContainer.strokeRect(
      bound.left,
      bound.top,
      bound.width,
      bound.height
    );
    console.log(bound);

  }
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>

För referens Arbeta med evenemang