創建自定義圖案畫筆

Question

我在我需要創建的Pattern Brush兩個非常具體的類型使用Fabric.js

1. 虛線與中端X的任務。
2. 簡單的箭頭線。

我需要這兩種類型的畫筆在自由繪畫模式。

任何指導或建議都會非常有幫助。

這是我試過刷1號，但這並沒有解決的目的：

var hLinePatternBrush = new fabric.PatternBrush(canvas); 
hLinePatternBrush.getPatternSrc = function() { 

    var patternCanvas = fabric.document.createElement('canvas'); 
    patternCanvas.width = patternCanvas.height = 10; 
    var ctx = patternCanvas.getContext('2d'); 

    ctx.strokeStyle = '#ffffff'; 
    ctx.strokeLineCap ="round"; 
    ctx.lineWidth = 5; 
    ctx.beginPath(); 
    ctx.moveTo(5, 0); 
    ctx.lineTo(5, 10); 
    ctx.closePath(); 
    ctx.stroke(); 

    return patternCanvas; 
}; 
canvas.freeDrawingBrush = hLinePatternBrush; 

而對於刷2號我不知道任何責任。

Answer 1

這是我對這個問題的實現。未來可能會幫助別人。

fabric.Path.prototype.selectable = false; 
    fabric.Triangle.prototype.selectable = false; 
    fabric.Text.prototype.selectable = false; 



    /* ------------------------ Player Path Brush --------------------- */ 


    var vLinePatternBrush = new fabric.PencilBrush(canvas); 

    vLinePatternBrush.color = '#fff'; 
    if($("#line_type").val() == 'choose_type' || $("#line_type").val() == 'player_path') 
    { 
     vLinePatternBrush.strokeDashArray = [5, 15]; 
    } 
    else 
    { 
     vLinePatternBrush.strokeDashArray = [0,0]; 
    } 

    vLinePatternBrush.hasControls = false; 

    canvas.freeDrawingBrush = vLinePatternBrush; 
    //canvas.freeDrawingBrush.color = '#fff'; 
    canvas.freeDrawingBrush.width = 4; 

    //Choosing the Right Brush as per Users Requirement 
    $("#line_type").change(function(e){ 
     if($("#line_type").val() == 'choose_type' || $("#line_type").val() == 'player_path') 
     { 

      canvas.freeDrawingBrush = vLinePatternBrush; 
      canvas.freeDrawingBrush.color = '#fff'; 
      canvas.freeDrawingBrush.width = 4; 
      vLinePatternBrush.strokeDashArray = [5, 15]; 

     } 
     else 
     { 
      var normalLine = new fabric['PencilBrush'](canvas); 
      normalLine.strokeDashArray = [0,0]; 
      canvas.freeDrawingBrush = normalLine; 
      canvas.freeDrawingBrush.color = '#fff'; 
      canvas.freeDrawingBrush.width = 4; 
      console.log('here'); 
     } 
    }); 

    // This is required to make sure that the objects can be selected if wrapped inside a path line. 
    canvas.on('object:added', function(e) { 
     console.log(e); 
     if(e.target.type == 'path' || e.target.type == 'text' || e.target.type == 'triangle') 
     { 
      console.log('Sending Object to Background'); 
      canvas.sendToBack(e.target); 
     } 
    }); 

//處理X和箭頭部位一旦路徑被繪製

canvas.on('path:created', function(path) { 
    console.log(path); 

    if($("#line_type").val() == 'choose_type' || $("#line_type").val() == 'player_path') 
    { 
     console.log(path.path.path[(path.path.path.length -1)]); 



     var x1 = path.path.path[0][1]; 
     var y1 = path.path.path[0][2]; 
     var x2 = path.path.path[(path.path.path.length -1)][1]; 
     var y2 = path.path.path[(path.path.path.length -1)][2]; 

     var angle = calcArrowAngle(x1,y1,x2,y2); 
     angle = angle - 90; 

     var text = new fabric.Text('+', { 
      left: path.path.path[(path.path.path.length -1)][1], 
      top: path.path.path[(path.path.path.length -1)][2], 
      fill: 'white', 
      originX: 'center', 
      originY: 'center', 
      flipx: true, 
      selectable: false, 
      flipy: true, 
      fontSize: 80, 
      fontFamily: 'ABeeZee', 
      fill: 'white', 
      angle: angle, 
      hasControls: false 
     }); 

     canvas.add(text); 
    } 



    if($("#line_type").val() == 'ball_path') 
    { 
     console.log(path.path.path[(path.path.path.length -1)]); 

     var x1 = path.path.path[0][1]; 
     var y1 = path.path.path[0][2]; 
     var x2 = path.path.path[(path.path.path.length -1)][1]; 
     var y2 = path.path.path[(path.path.path.length -1)][2]; 

     var angle = calcArrowAngle(x2,y2,x1,y1); 
     angle = angle - 90; 

     arrow = new fabric.Triangle({ 
      left: (path.path.path[(path.path.path.length -1)][1] + 2), 
      top: (path.path.path[(path.path.path.length -1)][2] + 2), 
      originX: 'center', 
      originY: 'center', 
      hasBorders: false, 
      hasControls: false, 
      lockScalingX: true, 
      lockScalingY: true, 
      lockRotation: true, 
      pointType: 'arrow_start', 
      angle: angle, 
      width: 15, 
      height: 15, 
      fill: 'white', 
      hasControls: false 

     }); 

     canvas.add(arrow); 
    } 
    // This is specific to my implementation for undo and redo. Once can ignore 
    updateModifications(true); 

}); 

在我剛剛創建兩個簡單的pencilBrush一個與DottedLines和一個正常的行代碼的第一部

在第二部分中，我得到了路徑結束的確切點（可能不是最好的方法，但它對我有用）。一旦我得到了這個觀點，我就會在那個位置放下所需的形狀。

CalcArrowAngle：積分計算器

function calcArrowAngle(x1, y1, x2, y2) { 
     var angle = 0, 
     x, y; 

     x = (x2 - x1); 
     y = (y2 - y1); 

     if (x === 0) { 
      angle = (y === 0) ? 0 : (y > 0) ? Math.PI/2 : Math.PI * 3/2; 
     } else if (y === 0) { 
      angle = (x > 0) ? 0 : Math.PI; 
     } else { 
      angle = (x < 0) ? Math.atan(y/x) + Math.PI : (y < 0) ? Math.atan(y/x) + (2 * Math.PI) : Math.atan(y/x); 
     } 

     return (angle * 180/Math.PI); 
    } 

我不是說這是做到這一點的最好辦法。但它解決了這個問題。

輸出PNG：