fabricjs, Nach Objekt Drehen ist es möglich,

Question

Objekt Nach dem Drehen links, oben und rechts Position viritual Rectagle zu bekommen, ist es möglich, links, oben und rechts Position des virtuellen Rechtecks ​​zu erhalten?

Answer 1

Was Sie suchen die ist rect begrenzende des Objekts:

getBoundingRect (ignoreVpt) → {Object} Gibt Koordinaten umschließende Rechteck des Objekts (links, oben, Breite , Höhe) ist die Box als ausgerichtet an der Leinwandachse vorgesehen.

Rückkehr: Objekt mit links, oben, Breite, Höhe Eigenschaften Typ Objekt

Referenz: fabricjs sourcecode

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>

Da das after:render Ereignis nach jedem Rahmen kontinuierlich abgefeuert wird gerendert wird, können Sie die aktualisierte Begrenzungsbox Ihres Objekts für jedes Update in Position, Rotation sehen und Dimensionen.

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>

Als Referenz Working with events