Javascript fabric js中的对象对齐

我试图在画布中实现对象对齐（即右对齐、中对齐、左对齐、上对齐、下对齐）。假设用户选择了一个对象（即文本或图像），然后如果用户点击“右对齐”选项，则所选对象应对齐到右侧

我试过以下两种方法，但都没有成功

var canvas=newfabric.canvas（'a'）；
canvas.add（new fabric.Rect({
左:50,，
前50名，
身高：50，
宽度：50，
填充：“红色”
}));
canvas.add（new fabric.Rect({
左：130，
前50名，
身高：50，
宽度：50，
填充：“绿色”
}));
canvas.add（new fabric.Rect({
左:90,，
排名：130，
身高：50，
宽度：50，
填充：“蓝色”
}));
canvas.renderAll（）；
$（'.alignment'）。单击（函数（）{
var cur_value=$（this.attr（'data-action'）；
如果（当前值！=''）{
工艺校准（电流值）；
}否则{
警报（“请选择一项”）；
返回false；
}
});
/*对齐选定对象*/
功能过程校准（val）{
开关（val）{
案例“正确”：
//以低于1的速度进行试验
//setPositionByOrigin（新的fabric.Point（activeObj.top，canvas.getWidth（）），activeObj.originY，'center'）；
//尝试低于1，但不起作用
var activeObj=canvas.getActiveObject（）；
activeObj.set({
originX:'对'，
//原创：“中心”
});
activeObj.setCoords（）；
canvas.renderAll（）；
打破
}
}

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

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

var canvas=newfabric.canvas（'a'）；
canvas.add（new fabric.Rect({
左:50,，
前50名，
身高：50，
宽度：50，
填充：“红色”
}));
canvas.add（new fabric.Rect({
左：130，
前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）
});
打破
案例“中心”：
activeObj.set({
左：（canvas.width/2）-（activeObj.width*activeObj.scaleX）/2）
});
打破
}
}

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

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

以下是我使用FabricJS 2.0实现的

setAlign

方法

setAlign(align, canvas) {
    let activeObj = canvas.getActiveObject(),
      horizontalCenter = (activeObj.width * activeObj.scaleX) / 2,
      verticalCenter = (activeObj.height * activeObj.scaleY) / 2,
      { width, height } = canvas

    switch (align) {
      case 'top':
        activeObj.set({ top: verticalCenter })
        break
      case 'left':
        activeObj.set({ left: horizontalCenter })
        break
      case 'bottom':
        activeObj.set({ top: height - verticalCenter })
        break
      case 'right':
        activeObj.set({ left: width - horizontalCenter })
        break
      case 'center':
        activeObj.set({ left: (width / 2) })
        break
      case 'middle':
        activeObj.set({ top: (height / 2) })
        break
    }

    activeObj.setCoords()
    canvas.renderAll()
}

---

Durga的答案并不完美，因为如果顺时针旋转一个长方体并单击左对齐按钮，长方体将按其左上角对齐，而不是按其实际左边缘对齐

您需要使用getBoundingRect（）函数。演示：

var canvas=this.\uu canvas=newfabric.canvas（'c'）；
fabric.Object.prototype.transparentCorners=false；
var rect=new fabric.rect({
左:100,，
前50名，
宽度：100，
身高：100，
填充：“绿色”，
角度：20，
填充：0
});
canvas.add（rect）；
canvas.setActiveObject（canvas.item（0））；
canvas.forEachObject（函数（obj）{
var setCoords=obj.setCoords.bind（obj）；
obj.on({
移动：setCoords，
缩放：setCoords，
旋转：setCoords
});
});
on（'after:render'，function（））{
canvas.contextContainer.strokeStyle='red'；
canvas.forEachObject（函数（obj）{
var-bound=obj.getBoundingRect（）；
canvas.contextContainer.strokeRect(
绑定。左+0.5，
上限+0.5，
宽度，
极限高度
);
})
});
函数alignLeft（）{
var obj=canvas.getActiveObject（）；
var-bound=obj.getBoundingRect（）；
//console.log（bound.left）；
//控制台日志（对象左侧）；
对象集（'left'，（obj.left-bound.left））；
canvas.getActiveObject（）.setCoords（）；
canvas.renderAll（）；
}

左对齐

虽然其他答案让我走上了正确的轨道，但它们都不适用于旋转的对象，诀窍是将变换原点设置为中心，并像DivPusher指出的那样使用getBoundingRect（）

//将结构变换原点覆盖到中心
fabric.Object.prototype.set({
原文：'中心'，
原文：'中心'，
});
var canvas=newfabric.canvas（'a'）；
canvas.add（new fabric.Rect({
左:50,，
前50名，
身高：50，
宽度：50，
填充：“红色”
}));
add（newfabric.Text（'Fabricjs'，{
左:200,，
排名：80，
填写：“#555”，
角度：35，
scaleX:.8，
斯卡利：.8，
}));
canvas.add（new fabric.Rect({
左:90,，
排名：130，
身高：50，
宽度：50，
填充：“蓝色”，
角度：45，
}));
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）{
const-bound=activeObj.getBoundingRect（）
开关（val）{
案例“左”：
activeObj.set({
左：activeObj.left-bound.left
});
打破
案例“正确”：
activeObj.set({
左：canv