您正在寻找的是边界矩形你的对象：
获取边界矩形(忽略Vpt) → {Object} 返回对象边界矩形的坐标（左、上、宽、高），该框旨在与画布轴对齐。
返回：具有 left、top、width、height 属性的对象 Type Object
参考：Fabricjs源代码 http://fabricjs.com/docs/fabric.js.html#line13672
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>
自从after:render渲染每一帧后连续触发该事件，您可以看到每次更新时对象的更新边界框，包括位置、旋转和尺寸。
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>
以供参考处理事件 https://github.com/kangax/fabric.js/wiki/Working-with-events
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
