javascript - fabricjs, selepas memutar objek adakah mungkin untuk mendapatkan kedudukan kiri, atas dan kanan bagi segi empat maya

Selepas objek diputar, adakah mungkin untuk mendapatkan kedudukan kiri, atas dan kanan segi empat maya?

Jawapan #1

Apa yang anda cari ialah rektan sempadan objek anda:

getBoundingRect(ignoreVpt) → {Object} Mengembalikan koordinat segi empat pembatas objek (kiri, atas, lebar, tinggi) kotak itu dimaksudkan untuk diselaraskan dengan paksi kanvas.

Pulangan: Objek dengan sifat kiri, atas, lebar, tinggi Jenis Objek

rujukan: kod sumber 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>

Oleh kerana acara after:render diaktifkan secara berterusan selepas setiap bingkai dirender, anda boleh melihat kotak sempadan yang dikemas kini bagi objek anda untuk setiap kemas kini, dalam kedudukan, putaran dan dimensi.

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>

Sebagai rujukan Bekerja dengan acara