Fabricjs在繪製時連接線

Question

我需要繪製連接的線。例如，用簡單的線條，我需要繪製三角形，矩形等，我需要將線連接到它們的端點。當有可能進行連接時突出顯示圓圈將會很棒。在我的代碼中，我可以繪製線條（就像多段線），但我無法將第一條線與最後一條線連接起來。 我試圖做鼠標：over和鼠標：out事件，但他們不工作。

鏈接到我的代碼示例：

https://jsfiddle.net/5gLwL7d3/ 

這裏是我的代碼：

<canvas id="c" width="500" height="470" style="border:1px solid #ccc"></canvas> 

的JavaScript

var canvas = new fabric.Canvas('c', { selection: false }); 
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; 
var line, isDown, isOver; 
var lines = []; 
var id = 1; 

canvas.on('mouse:down', function(o){ 
    console.log("MOUSE:DOWN"); 
    isDown = true; 
    var pointer = canvas.getPointer(o.e); 
    var points = [ pointer.x, pointer.y, pointer.x, pointer.y ]; 
    line = new fabric.Line(points, { 
    strokeWidth: 9, 
    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); 
    line.set({ x2: pointer.x, y2: pointer.y }); 
    canvas.renderAll(); 
}); 

fabric.util.addListener(window,'keyup', function(e) { 
     console.log("KEYUP :: " + e.keyCode); 
     if (e.keyCode === 13) { 
     isDown = false;   
    } 
}); 

canvas.on('mouse:over', function(e) { 
    //e.target.setFill('red'); 
    isOver = true; 
    console.log("MOUSE:OVER"); 
    console.log(e); 
}); 

canvas.on('mouse:out', function(e) { 
    isOver = false; 
    console.log("MOUSE:OUT"); 
}); 

謝謝！

Answer 1

我爲這個問題創建瞭解決方案。效率應該有一些變化，但代碼工作正常。

var canvas = new fabric.Canvas('c', { selection: false }); 
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; 

var circle, line; 
var isDown = false; 
var isOver = false; 
var lines = []; 
var circles = []; 
var id = 1; 
var x2 = 0; 
var y2 = 0; 
var circleIndex; 
var startDraw = false; 


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

    isDown = true; 
      var pointer = canvas.getPointer(options.e); 

      if (isOver) { 
       var points = [x2, y2, x2, y2]; 
      } else if (!isOver) { 
       var points = [pointer.x, pointer.y, pointer.x, pointer.y]; 
      } 

      if (!isOver || !startDraw) { 
       line = new fabric.Line(points, { 
        strokeWidth: 3, 
        fill: 'red', 
        stroke: 'red', 
        originX: 'center', 
        originY: 'center', 
        selectable: false 
       }); 
       circle = new fabric.Circle({ 
        left: line.x1, 
        top: line.y1, 
        strokeWidth: 1, 
        opacity: 0.5, 
        radius: 10, 
        fill: 'transparent', 
        stroke: '#666', 
        perPixelTargetFind: true, 
        selectable: false 
       }); 
       circle.position = "left"; 
       circle.hasControls = circle.hasBorders = false; 
       circles.push(circle); 
       canvas.add(circle) 
       lines.push(line); 
       circle.lineId = lines.length - 1; 
       canvas.add(line); 
      } else { 
       startDraw = false; 
       if (circles[circleIndex].position === 'left') { 
        var points = [lines[circles[circleIndex].lineId].x1, 
            lines[circles[circleIndex].lineId].y1, 
            lines[circles[circleIndex].lineId].x1, 
            lines[circles[circleIndex].lineId].y1]; 
       } 
       else { 
        var points = [lines[circles[circleIndex].lineId].x2, 
            lines[circles[circleIndex].lineId].y2, 
            lines[circles[circleIndex].lineId].x2, 
            lines[circles[circleIndex].lineId].y2]; 
       } 

       line = new fabric.Line(points, { 
        strokeWidth: 3, 
        fill: 'red', 
        stroke: 'red', 
        originX: 'center', 
        originY: 'center', 
        selectable: false 
       }); 
       canvas.add(line); 
       lines.push(line); 
      } 
}); 

canvas.on('mouse:move', function (options) { 
    var pt = { x: options.e.clientX, y: options.e.clientY }; 

      for (i = 0; i < circles.length; i++) { 
       if (circles[i].containsPoint(pt)) { 
        if (!circles[i].mouseOver) { 
         circles[i].mouseOver = true; 
         circles[i].set('radius', 12); 
         circles[i].set('opacity', 1.0); 
         circles[i].set('selectable', false); 
         canvas.renderAll(); 
         isOver = true; 
         circleIndex = i; 
         if (circles[i].position === 'left') { 
          x2 = lines[circles[i].lineId].x1; 
          y2 = lines[circles[i].lineId].y1; 
         } else { 
          x2 = lines[circles[i].lineId].x2; 
          y2 = lines[circles[i].lineId].y2; 
         } 

        } 
       } else if (circles[i].mouseOver) { 
        circles[i].mouseOver = false; 
        circles[i].set('opacity', 0.5); 
        circles[i].set('radius', 10); 
        circles[i].set('selectable', false); 
        canvas.renderAll(); 
        isOver = false; 
       } 
      } 


      if (!isDown) { 
       startDraw = true; 
       return; 
      } 
      startDraw = false; 
      var pointer = canvas.getPointer(options.e); 

      if (isOver) { 
       line.set({ x2: x2, y2: y2 }); 
      } else { 
       line.set({ x2: pointer.x, y2: pointer.y }); 
      } 

      canvas.renderAll(); 
}); 

fabric.util.addListener(window, 'keyup', function (options) { 
if (options.keyCode === 13) { 
       isDown = false; 
       if (isOver) { 
        circles[circleIndex].set('radius', 10); 
        circles[circleIndex].set('opacity', 0.5); 
        canvas.renderAll(); 
        line.set({ x2: x2, y2: y2 }); 
        isOver = false; 
       } else { 
        canvas.add(line); 
        circle = new fabric.Circle({ 
         left: lines[lines.length - 1].x2, 
         top: lines[lines.length - 1].y2, 
         strokeWidth: 1, 
         opacity: 0.5, 
         radius: 10, 
         fill: 'transparent', 
         stroke: '#666', 
         perPixelTargetFind: true, 
         selectable: false 
        }); 
        circle.position = "right"; 
        circle.hasControls = circle.hasBorders = false; 
        circle.lineId = lines.length - 1; 
        circles.push(circle); 
        canvas.add(circle); 
        canvas.renderAll(); 
       } 

      } 


});