创建自定义图案画笔

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：