FabricJS - 向画布添加线条并仅控制它的长度答案

【问题标题】：FabricJS - add line to canvas and control only it's lengthFabricJS - 向画布添加线条并仅控制它的长度
【发布时间】：2016-02-17 17:23:39
【问题描述】：

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

我已经尝试设置lockScalingY: true，但问题是当添加一条线时，控制手柄彼此非常接近，以至于我不能只与水平控制手柄交互......角落手柄实际上阻挡了水平处理...

如何做到这一点？

【问题讨论】：

即使查看 fabricjs.com 上的演示，它似乎也有问题（无论如何在 Chrome 上）

标签： javascript html fabricjs

【解决方案1】：

相邻的 FabricJS 行的精细控制

像 Photoshop 这样的图形程序处理这个常见问题的方式是让用户将线定位在靠近所需的交叉点，然后使用箭头键将线“轻推”到一个像素的位置.

下面的代码说明了一个粗略的解决方案，它对 FabricJS 行做同样的事情：

用户选择了一行。
关闭控制手柄和边框。
让用户“轻推”线条完美对齐（此处线条长度增加）。
重新打开控制手柄和边框。

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

您可能希望使用箭头键而不是按钮来“轻推”。
我让轻推一次 10 像素 - 您可以一次执行 1 像素。
当用户开始轻推时，您会自动为他们关闭手柄和边框。

这是代码和小提琴：http://jsfiddle.net/m1erickson/dd742/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>

<style>
    body{ background-color: ivory; padding:30px; }
    canvas{border: 1px solid red; }
</style>

<script>
    $(function(){

        var canvas = new fabric.Canvas('canvas');
        var selectedLine;

        var line1=newLine(50,100,150,100,"red");
        var line2=newLine(160,50,160,150,"green");
        canvas.add(line1,line2);

        function newLine(x1,y1,x2,y2,color){
            var line=new fabric.Line(
                [x1,y1,x2,y2],
                {fill:color,strokeWidth:15,selectable:true}
            );
            return(line);
        };

        $("#hOff").click(function(){
            selectedLine.hasBorders=false;
            selectedLine.hasControls=false;
            canvas.renderAll();
        });

        $("#hOn").click(function(){
            selectedLine.hasBorders=false;
            selectedLine.hasControls=true;
            canvas.renderAll();
        });

        $("#shorter").click(function(){
            changeLineLength(selectedLine,-10);
            canvas.renderAll();
        });

        $("#longer").click(function(){  
            changeLineLength(selectedLine,10);
            canvas.renderAll();
        });

        function changeLineLength(line,adjustment){
            if(!selectedLine){return;}
            if(line.get("y1")==line.get("y2")){   // line is horizontal
                line.set("x2",line.get("x2")+adjustment);
            }else
            if(line.get("x1")==line.get("x2")){   // line is vertical
                line.set("y2",line.get("y2")+adjustment);   
            }else{    // line is diagonal
                line.set("x2",line.get("x2")+adjustment);   
                line.set("y2",line.get("y2")+adjustment);   
            }
        }

        canvas.observe('object:selected', function(eventTarget) {
            var event=eventTarget.e;
            var target=eventTarget.target;
            selectedLine=target;
        });

    }); // end $(function(){});
</script>

</head>

<body>
    <p>Select a line,</p><br/>
    <p>Turn handles Off</p><br/>
    <p>Make lines intersect by pressing longer/shorter</p><br/>
    <canvas id="canvas" width="600" height="200"></canvas> 
    <button id="hOff">Handles Off</button>
    <button id="shorter">Shorter</button>
    <button id="longer">Longer</button><br/>
    <button id="hOn">Handles On</button>
</body>
</html>

【讨论】：

感谢您为这个答案所做的努力。这不是我想要的界面方式，因为我想让用户使用鼠标更改墙壁长度，但这是一个有趣的替代解决方案。有没有办法只隐藏一些控制手柄？
否，控制句柄显示为一个组，没有对单个句柄进行精细控制。因此，选项是此 hack 的改进版本或修改源代码是您的选项。顺便说一句，如果你想去那里，源代码是可用的并且注释很好；）

【解决方案2】：

可能对某人有所帮助。

为事件添加处理程序

'object:selected': _objSelected

然后在处理程序将不需要的控制设置为 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;
    }
}

我还向新对象 Line 添加了 objectType（自定义属性）和 padding（为了美观）

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

【讨论】：