Javascript 在fabricjs中将对象与画布对齐

我正在尝试实现对象对齐（即上-下-左-右-CenterH-CenterV），我的代码工作得很好，但如果对象旋转，我不知道如何处理对齐（代码提供了当角度不同于0时对象的一部分消失的情况，我想知道如何计算最小左偏移量，以便仍然能够看到整个旋转对象）。下面是我的代码

var canvas=newfabric.canvas（'a'）；
canvas.add（new fabric.Rect({
左:50,，
前50名，
身高：50，
宽度：50，
填充：“红色”
}));
canvas.add（new fabric.Rect({
角度：76，
左：180，
前50名，
身高：50，
宽度：50，
填充：“绿色”
}));
canvas.add（new fabric.Rect({
左:90,，
排名：130，
身高：50，
宽度：50，
填充：“蓝色”
}));
canvas.renderAll（）；
$（'.alignment'）。单击（函数（）{
var cur_value=$（this.attr（'data-action'）；
var activeObj=canvas.getActiveObject（）| | canvas.getActiveGroup（）；
如果（当前值！=''&&activeObj）{
进程对齐（当前值，activeObj）；
activeObj.setCoords（）；
canvas.renderAll（）；
}否则{
警报（“请选择一项”）；
返回false；
}
});
/*对齐选定对象*/
功能过程对齐（val、activeObj）{
开关（val）{
案例“左”：
activeObj.set({
左：0
});
打破
案例“正确”：
activeObj.set({
左：canvas.width-（activeObj.width*activeObj.scaleX）
});
打破
案例“顶部”：
activeObj.set({
排名：0
});
打破
案例“底部”：
activeObj.set({
顶部：canvas.height-（activeObj.height*activeObj.scaleY）
});
打破
案例“centerH”：
activeObj.set({
左：（canvas.width/2）-（activeObj.width*activeObj.scaleX）/2）
});
打破
案例“centerV”：
activeObj.set({
顶部：（canvas.height/2）-（activeObj.height*activeObj.scaleY）/2）
});
打破
}
}

画布{
边框：2件纯黑；
}

左对齐
居中对齐
对齐中心V
右对齐
顶端对齐
底端对齐

看看这种方法，

动画

有一个很好的中止选项，我使用它来停止任何角点超出画布边界的情况，我刚刚在chrome上测试过，为了简化删除的中心对齐，如果需要，可以稍后添加

功能移动（对象、道具、值）{
obj.saveState（）；
对象动画（道具、值、{
持续时间：1000，
onChange:canvas.renderAll.bind（canvas），
onComplete:canvas.renderAll.bind（canvas），
easing:fabric.util.ease[“easeOutQuad”]，
中止：函数（）{
obj.setCoords（）；
用于（对象A中的常量属性）{
点=对象名称[道具]
如果（点x=canvas.width||
点y=画布高度）{
obj.left=obj.\u stateProperties.left；
obj.top=obj.\u stateProperties.top；
返回真值
}
}
obj.saveState（）；
}
});
}
功能过程校准（val、obj）{
开关（val）{
案例“左”：
移动（obj，‘左’，1）；
打破
案例“正确”：
移动（对象“左”，画布宽度-1）；
打破
案例“顶部”：
移动（obj，‘顶部’，1）；
打破
案例“底部”：
移动（obj，“顶部”，画布高度-1）；
打破
}
}
var canvas=newfabric.canvas（'a'）；
canvas.stateful=true；
add（newfabric.Rect（{left:50，top:50，height:50，width:50，fill:'red'}））；
add（newfabric.Rect（{angle:76，left:240，top:50，height:50，width:50，fill:'green'}））；
add（newfabric.Rect（{left:120，top:100，height:50，width:50，fill:'blue'}））；
canvas.renderAll（）；
$（'.alignment'）。单击（函数（）{
var cur_value=$（this.attr（'data-action'）；
var activeObj=canvas.getActiveObject（）| | canvas.getActiveGroup（）；
如果（当前值！=''&&activeObj）{
进程对齐（当前值，activeObj）；
activeObj.setCoords（）；
canvas.renderAll（）；
}否则{
警报（“请选择一项”）；
返回false；
}
})；

画布{
边框：2件纯黑；
}

左对齐
右对齐
顶端对齐
底端对齐

因此，@HelderSepulveda建议我使用aCoords动态计算坐标，我将在下面粘贴工作代码，以防有人需要

var canvas=newfabric.canvas（'a'）；
canvas.add（new fabric.Rect({
左:50,，
前50名，
身高：50，
宽度：50，
填充：“红色”
}));
canvas.add（new fabric.Rect({
角度：76，
左：180，
前50名，
身高：50，
宽度：50，
填充：“绿色”
}));
canvas.add（new fabric.Rect({
左:90,，
排名：130，
身高：50，
宽度：50，
填充：“蓝色”
}));
canvas.renderAll（）；
$（'.alignment'）。单击（函数（）{
var cur_value=$（this.attr（'data-action'）；
var activeObj=canvas.getActiveObject（）| | canvas.getActiveGroup（）；
如果（当前值！=''&&activeObj）{
进程对齐（当前值，activeObj）；
activeObj.setCoords（）；
canvas.renderAll（）；
}否则{
警报（“请选择一项”）；
返回false；
}
});
/*对齐选定对象*/
功能过程对齐（val、activeObj）{
开关（val）{
案例“左”：
左var；
如果（活动对象角度90和&活动对象角度180和&活动对象角度270）{
左=0；
}
activeObj.set({
左：左
});
打破
案例“正确”：
左var；
如果（活动对象角度90和&活动对象角度180和&活动对象角度270）{
left=activeObj.acoods.tl.x+（canvas.width-activeObj.acoods.br.x）；
}
activeObj.set({
左：左
});
打破
案例“顶部”：
var-top；
如果（活动对象角度90和&活动对象角度180和&活动对象角度270）{
top=activeObj.aCoords.tl.y-