javascript - fabricjs, Setelah memutar objek, apakah mungkin untuk mendapatkan posisi kiri, atas, dan kanan dari persegi panjang virtual

Setelah memutar objek, apakah mungkin mendapatkan posisi kiri, atas, dan kanan dari persegi panjang virtual?

Jawaban #1

Apa yang Anda cari adalah rect pembatas dari objek Anda:

getBoundingRect(ignoreVpt) → {Object} Mengembalikan koordinat dari persegi panjang pembatas objek (kiri, atas, lebar, tinggi) kotak dimaksudkan agar sejajar dengan sumbu kanvas.

Mengembalikan: Objek dengan properti left, top, width, height Tipe Objek

referensi: kode 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>

Karena event after:render dipicu terus-menerus setelah setiap frame dirender, Anda dapat melihat kotak pembatas yang diperbarui dari objek Anda untuk setiap pembaruan, dalam posisi, rotasi, 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 referensi Bekerja dengan acara