FabricJS Draw Line But ...？

Question

我想做點什麼。例如，當我點擊屏幕時，我會提出一個問題。之後當我點擊其他地方放點時。最後，在這兩點之間自動繪製線條。我該怎麼做呢？

謝謝您的幫助:)

Answer 1

HTML

<canvas id="c" height="200" width="300"></canvas> 

JS

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

var point1; 
canvas.on('mouse:down', function (options) { 

    var x = options.e.clientX - canvas._offset.left; 
    var y = options.e.clientY - canvas._offset.top; 

    var circle = new fabric.Circle({ 
     left: x, 
     top: y, 
     fill: 'red', 
     originX: 'center', 
     originY: 'center', 
     hasControls: false, 
     hasBorders: false, 
     lockMovementX: true, 
     lockMovementY: true, 
     radius: 5, 
     hoverCursor: 'default' 
    }); 

    canvas.add(circle); 

    if (point1 === undefined) { 
     point1 = new fabric.Point(x, y) 
    } else { 
     canvas.add(new fabric.Line([point1.x, point1.y, x, y], { 
      stroke: 'blue', 
      hasControls: false, 
      hasBorders: false, 
      lockMovementX: true, 
      lockMovementY: true, 
      hoverCursor: 'default' 
     })) 
     point1 = undefined; 
    } 
}); 

---

小提琴 - http://jsfiddle.net/zdaax418/

Answer 2

解決方案;

HTML

<button id="end">End</button> 
<button id="zoomIn">Zoom-In</button> 
<button id="zoomOut">Zoom-Out</button> 
<canvas id="c" width="1800" height="910" ></canvas> 

的JavaScript

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

var point1; 
var line=null; 
var canvasScale = 1; 
var SCALE_FACTOR = 1.2; 
var bool = true; 
canvas.on('mouse:down', function (options) { 

    var x = options.e.clientX - canvas._offset.left; 
    var y = options.e.clientY - canvas._offset.top; 


    var circle = new fabric.Circle({ 
     left: x, 
     top: y, 
     fill: 'red', 
     originX: 'center', 
     originY: 'center', 
     hasControls: false, 
     hasBorders: false, 
     lockMovementX: false, 
     lockMovementY: false, 
     radius: 5, 
     hoverCursor: 'default' 
    }); 

    if(bool) { 
     circle.line1 = null; 
     circle.line2 = null; 
     canvas.add(circle); 
    } 

    point1 = new fabric.Point(x, y); 
    if(line){ 
     line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], { 
      fill: 'grey', 
      stroke: 'grey', 
      hasControls: false, 
      hasBorders: false, 
      lockMovementX: true, 
      lockMovementY: true, 
      selectable: false, 
      hoverCursor: 'default' 
     }); 
    }else{ 
     line = new fabric.Line([x, y, x, y], { 
      fill: 'grey', 
      stroke: 'grey', 
      hasControls: false, 
      hasBorders: false, 
      lockMovementX: true, 
      lockMovementY: true, 
      selectable: false, 
      hoverCursor: 'default' 
     }); 
    } 
    if(bool) 
     canvas.add(line); 
}); 
$("#end").click(function(){ 
     var lines = canvas.getObjects('line'); 
     var firstLine = lines[1]; 
     var lastLine = lines[lines.length - 1]; 
     line = new fabric.Line([lastLine.get('x2'), lastLine.get('y2'),firstLine.get('x1'), firstLine.get('y1')], { 
      fill: 'grey', 
      stroke: 'grey', 
      hasControls: false, 
      hasBorders: false, 
      lockMovementX: false, 
      lockMovementY: false, 
      selectable: false, 
      hoverCursor: 'default' 
     }); 
     canvas.add(line); 
     var lines = canvas.getObjects('line'); 
     var circles = canvas.getObjects('circle'); 

     for(i = 1; i < circles.length - 1; i++) { 
      for(j = 0; j < lines.length; j++) { 
       if(circles[i].getLeft() == lines[j].get('x1') && circles[i].getTop() == lines[j].get('y1')) { 
        circles[i].line2 = lines[j]; 
        circles[i].line1 = lines[j - 1]; 
       } 
      } 
     } 
     circles[0].line1 = lines[lines.length - 1]; 
     circles[0].line2 = lines[1]; 
     circles[circles.length - 1].line2 = lines[lines.length - 1]; 
     circles[circles.length - 1].line1 = lines[0]; 

     bool = false; 
    }); 

$("#zoomIn").click(function() { 

    canvasScale = canvasScale * SCALE_FACTOR; 

    canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); 
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); 

    var circles = canvas.getObjects('circle'); 

    for (var i in circles) { 
     var scaleX = circles[i].scaleX; 
     var scaleY = circles[i].scaleY; 
     var left = circles[i].left; 
     var top = circles[i].top; 

     circles[i].scaleX = scaleX * SCALE_FACTOR; 
     circles[i].scaleY = scaleY * SCALE_FACTOR; 
     circles[i].left = left * SCALE_FACTOR; 
     circles[i].top = top * SCALE_FACTOR; 
     circles[i].setCoords(); 

     var coord = circles[i].getCenterPoint(); 
     circles[i].line1.set({ 
     'x2': coord.x, 
     'y2': coord.y 
     }); 
     circles[i].line2.set({ 
     'x1': coord.x, 
     'y1': coord.y 
     }); 

    } 

    canvas.renderAll(); 
    canvas.calcOffset(); 
}); 

$("#zoomOut").click(function() { 

    canvasScale = canvasScale/SCALE_FACTOR; 

    canvas.setHeight(canvas.getHeight() * (1/SCALE_FACTOR)); 
    canvas.setWidth(canvas.getWidth() * (1/SCALE_FACTOR)); 

    var circles = canvas.getObjects('circle'); 
    for (var i in circles) { 
     var scaleX = circles[i].scaleX; 
     var scaleY = circles[i].scaleY; 
     var left = circles[i].left; 
     var top = circles[i].top; 

     circles[i].scaleX = scaleX * (1/SCALE_FACTOR); 
     circles[i].scaleY = scaleY * (1/SCALE_FACTOR); 
     circles[i].left = left * (1/SCALE_FACTOR); 
     circles[i].top = top * (1/SCALE_FACTOR); 

     circles[i].setCoords(); 
     var coord = circles[i].getCenterPoint(); 
     circles[i].line1.set({ 
     'x2': coord.x, 
     'y2': coord.y 
     }); 
     circles[i].line2.set({ 
     'x1': coord.x, 
     'y1': coord.y 
     }); 

    } 

    canvas.renderAll(); 
    canvas.calcOffset();  
}); 

canvas.on('object:moving', function(e) { 
    var p = e.target; 
    var coord = p.getCenterPoint(); 

    p.line1.set({ 'x2': coord.x, 'y2': coord.y }); 
    p.line2.set({ 'x1': coord.x, 'y1': coord.y }); 
    canvas.renderAll(); 
    });