Javascript FabricJS-将线添加到画布并仅控制它'；s长度

我正在使用FabricJS开发一个简单的楼层平面编辑器。在画布上添加线条（应该是墙）时，我希望能够只控制线条的长度，而不是宽度和高度

我尝试过设置

lockScalingY:true

，但问题是，当添加一行时，控制手柄彼此非常接近，我无法仅与水平控制手柄交互。。。角控制柄实际上会阻止水平控制柄

---

如何做到这一点？

对相邻的FabricJS生产线进行精细控制

像photoshop这样的图形程序处理这个常见问题的方法是让用户将线定位在所需的交点附近，然后使用箭头键一次一个像素地将线“推”到位

下面的代码演示了一个大致的解决方案，它对FabricJS行也有同样的作用：

用户选择一条线

关闭控制手柄和边框

让用户“轻推”线条，使其完全对齐（此处线条长度增加）

重新启用控制柄和边框

这只是“概念验证”代码。在您的生产应用程序中：

• 您可能希望使用箭头键而不是按钮来“轻推”
• 我让轻推一次进行10像素——你可以一次进行1像素
• 当用户开始轻推时，您将自动关闭它们的控制柄和边框

下面是代码和小提琴：

正文{背景色：象牙色；填充：30px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=newfabric.canvas（'canvas'）；
var选择线；
var line1=换行符（50100150100，“红色”）；
var line2=新线（160,50160150，“绿色”）；
canvas.add（第1行，第2行）；
函数换行符（x1、y1、x2、y2、颜色）{
var line=新结构。line(
[x1，y1，x2，y2]，
{填充：颜色，笔划宽度：15，可选：真}
);
返回（行）；
};
$（“#hOff”）。单击（函数（）{
selectedLine.hasBorders=false；
selectedLine.hasControls=false；
canvas.renderAll（）；
});
$（“#hOn”）。单击（函数（）{
selectedLine.hasBorders=false；
selectedLine.hasControls=true；
canvas.renderAll（）；
});
$（“#较短”）。单击（函数（）{
更改行长度（选择行，-10）；
canvas.renderAll（）；
});
$（“#更长”）。单击（函数（）{
更改行长度（选择行，10）；
canvas.renderAll（）；
});
功能更改LineLength（线路，调整）{
如果（！selectedLine）{return；}
如果（line.get（“y1”）==line.get（“y2”）{//line是水平的
行设置（“x2”，行获取（“x2”）+调整）；
}否则
如果（line.get（“x1”）==line.get（“x2”）{//line是垂直的
行设置（“y2”，行获取（“y2”）+调整）；
}否则{//线是对角线
行设置（“x2”，行获取（“x2”）+调整）；
行设置（“y2”，行获取（“y2”）+调整）；
}
}
canvas.observe（'object:selected'，函数（eventTarget）{
var event=eventTarget.e；
var target=eventTarget.target；
selectedLine=目标；
});
}); // end$（函数（）{}）；
选择一行，


关闭手柄


按长/短键使线相交


处理掉
更短的
更长的

处理

可能对某人有所帮助

向事件添加处理程序

'object:selected': _objSelected

然后，at处理程序将不需要的控件设置为false

function _objSelected(e) 
{
    if(e.target.objectType == 'line')
    {
        var cv = e.target._controlsVisibility;
        // mt - middle top, tl - top left and etc.
        cv.mt = cv.mb = cv.tl = cv.bl = cv.tr = cv.br = false;
    }
}

我还向新的对象线添加了objectType（自定义属性）和padding（用于美观）

var obj = new fabric.Line([50, 50, 150, 50], { padding: 10, objectType: 'line' });

---

即使看一下上面的演示，它看起来还是有问题的（无论如何，在Chrome上），谢谢你为这个答案所做的努力。这不是我想要的界面，因为我想让用户使用鼠标更改墙的长度，但这是一个有趣的替代解决方案。有没有办法只隐藏一些控制手柄？没有，控制手柄显示为一个组，没有对单个手柄的精细控制。因此，这些选项是这个黑客的改进版本，或者修改源代码是您的选项。顺便说一句，如果你想去那里，源代码是可用的，并且有很好的注释；）

var obj = new fabric.Line([50, 50, 150, 50], { padding: 10, objectType: 'line' });