Как нарисовать линию и чтоб вторая начиналась в середине первой?

19 сентября 2019, 19:30

В итоге мы должны иметь три координаты которые можно изменять и одну фиксированную в середине первой линии. Мой код может только рисовать линии одна за второй. Подскажите как можно сделать чтоб вторая линия рисовалась из середины первой и потом можно было изменять координаты этих линий?

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(o.e); 
  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(o.e); 
 
 
  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(o.e); 
  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>

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(o.e);
  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(o.e);

  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>