创建自定义图案画笔

Question

我正在执行一项任务，我需要使用 Fabric.js

创建两个非常特定类型的 Pattern Brush

最后有一个 X 的虚线。
一条简单的箭头线。

自由绘图模式需要这两种笔刷

任何指导或建议都会很有帮助。

这是我试过的 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，一个是虚线，一个是普通线

在第二部分中，我得到了路径结束的确切点（可能不是最好的方法，但它对我有用）。一旦我得到点，我就会在那个位置放下所需的形状。

CalcArrowAngle：致谢 Whosebug

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：

创建自定义图案画笔

Create Custom Pattern Brush

javascript

canvas

fabricjs