javascript - fabricjs, Sau khi xoay đối tượng, có thể lấy vị trí trái, trên và phải của hình chữ nhật ảo không

Sau khi quay vật thể, có thể lấy vị trí trái, trên và phải của hình chữ nhật ảo không?

Câu trả lời #1

Những gì bạn đang tìm là hình chữ nhật giới hạn của đối tượng của bạn:

getBoundingRect(ignoreVpt) → {Object} Trả về tọa độ của hình chữ nhật bao quanh đối tượng (trái, trên, chiều rộng, chiều cao); hộp được định nghĩa là căn chỉnh theo trục của canvas.

Trả về: Đối tượng với các thuộc tính left, top, width, height Loại Đối tượng

tham khảo: mã nguồn 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>

Vì sự kiện after:render được kích hoạt liên tục sau mỗi khung hình được hiển thị, bạn có thể thấy hộp giới hạn cập nhật của đối tượng của mình cho mỗi lần cập nhật, về vị trí, xoay và kích thước.

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>

Để tham khảo Làm việc với các sự kiện