javascript - fabricjs, po otočení objektu je možné získať ľavú, hornú a pravú pozíciu virtuálneho obdĺžnika

Je po otočení objektu možné získať ľavú, hornú a pravú pozíciu virtuálneho obdĺžnika?

Odpoveď č. 1

To, čo hľadáte, je ohraničujúci obdĺžnik vášho objektu:

getBoundingRect(ignoreVpt) → {Object} Vracia súradnice ohraničujúceho obdĺžnika objektu (ľavá, horná, šírka, výška). Box je určený tak, aby bol zarovnaný s osou plátna.

Návratová hodnota: Objekt s vlastnosťami left, top, width, height Typ Objekt

odkaz: zdrojový kód fabricjs

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>

Keďže udalosť after:render sa spúšťa nepretržite po vykreslení každého snímku, môžete vidieť aktualizovanú ohraničujúcu krabicu vášho objektu pri každej aktualizácii, v polohe, rotácii a rozmeroch.

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>

Pre referenciu Práca s udalosťami