As a result, we must have three coordinates that can be changed and one fixed in the middle of the first line. My code can only draw lines one by one. Tell me how you can make the second line drawn from the middle of the first and then you can change the coordinates of these lines?

var line, isDown, mode; var canvas = new fabric.Canvas('c'); canvas.perPixelTargetFind = true; canvas.targetFindTolerance = 4; $("#select").click(function() { mode = "select"; canvas.selection = true; canvas.renderAll(); }); $("#draw").click(function() { mode = "draw"; }); $("#delete").click(function() { deleteObjects(); }); // Adding objects to the canvas... canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); var points = [pointer.x, pointer.y, pointer.x, pointer.y]; if (mode == "draw") { line = new fabric.Line(points, { strokeWidth: 2, fill: 'red', stroke: 'red', originX: 'center', originY: 'center', }); canvas.add(line); } }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (mode == "draw") { line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); } }); canvas.on('mouse:up', function(o) { line.setCoords(); isDown = true; var pointer2 = canvas.getPointer(oe); var points2 = [pointer2.x, pointer2.y]; if (mode == "draw") { line = new fabric.Line(points2, { strokeWidth: 2, fill: 'red', stroke: 'red', originX: 'center', originY: 'center', }); canvas.add(line); } }); canvas.on('mouse:click', function(o) { isDown = false; line.setCoords(); }); // select all objects function deleteObjects() { var activeObject = canvas.getActiveObject(), activeGroup = canvas.getActiveGroup(); if (activeObject) { if (confirm('Are you sure?')) { canvas.remove(activeObject); } } else if (activeGroup) { if (confirm('Are you sure?')) { var objectsInGroup = activeGroup.getObjects(); canvas.discardActiveGroup(); objectsInGroup.forEach(function(object) { canvas.remove(object); }); } } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="select">Selection mode</button> <button id="draw">Drawing mode</button> <button id="delete">Delete selected object(s)</button><br /> <canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

    1 answer 1

     Сделал чтобы вторая линия была в центре. Теперь нужно чтобы они были как одно целое и добавить возможность изменять три координаты. <!DOCTYPE html> <html> <head> <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <title>Test</title> </head> <body> <button id="select">Selection mode</button> <button id="draw">Drawing mode</button> <button id="delete">Delete selected object(s)</button><br /> <canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas> <script type="text/javascript"> var line, isDown,mode, x3, y3; var canvas = new fabric.Canvas('c'); canvas.perPixelTargetFind = true; canvas.targetFindTolerance = 4; $("#select").click(function(){ mode="select"; canvas.selection=true; canvas.renderAll(); }); $("#draw").click(function(){ mode="draw"; }); $("#delete").click(function(){ deleteObjects(); }); // Adding objects to the canvas... canvas.on('mouse:down', function(o){ isDown = true; var pointer = canvas.getPointer(oe); var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; x3 = pointer.x; y3 = pointer.y; if(mode=="draw"){ line = new fabric.Line(points, { strokeWidth: 2, fill: 'red', stroke: 'red', originX: 'center', originY: 'center', selectable: true, targetFindTolerance: true }); line1 = new fabric.Line([100, 50, 100, 50], { strokeWidth: 2, fill: 'red', stroke: 'red', originX: 'center', originY: 'center', selectable: true, targetFindTolerance: true }); canvas.add(line) canvas.add(line1);} }); canvas.on('mouse:move', function(o){ if (!isDown) return; var pointer = canvas.getPointer(oe); if(mode=="draw"){ line.set({ x2: pointer.x, y2: pointer.y }); line1.set({ x2: ((pointer.x+x3)/2), y2: ((pointer.y+y3)/2) }); canvas.renderAll(); } }); canvas.on('mouse:up', function(o){ isDown = false; line.setCoords(); line1.setCoords(); }); // select all objects function deleteObjects(){ var activeObject = canvas.getActiveObject(), activeGroup = canvas.getActiveGroup(); if (activeObject) { if (confirm('Are you sure?')) { canvas.remove(activeObject); } } else if (activeGroup) { if (confirm('Are you sure?')) { var objectsInGroup = activeGroup.getObjects(); canvas.discardActiveGroup(); objectsInGroup.forEach(function(object) { canvas.remove(object); }); } } } </script> </body> </html>