Fabricjs freedrawing hline brush

问题

I was following to create freedrawing from here: http://fabricjs.com/freedrawing/ it was working fine with Pencil,Circle,Spray & Pattern but isn't working with hline,vline,square,diamond & texture. I had defined canvas earlier like this:

$(document).ready(function () {
    //setup front side canvas 
    canvas = new fabric.Canvas('tcanvas', {
        hoverCursor: 'pointer',
        selection: true,
        selectionBorderColor: 'blue'
    });
});

I have created free drawing function like this:

function getFabricBrush(mood) {
    var mood;
    if (mood === 'hline') {
        canvas.freeDrawingBrush = vLinePatternBrush;
    } else if (mood === 'vline') {
        canvas.freeDrawingBrush = hLinePatternBrush;
    } else if (mood === 'square') {
        canvas.freeDrawingBrush = squarePatternBrush;
    } else if (mood === 'diamond') {
        canvas.freeDrawingBrush = diamondPatternBrush;
    } else if (mood === 'texture') {
        canvas.freeDrawingBrush = texturePatternBrush;
    } else {
        canvas.freeDrawingBrush = new fabric[mood + 'Brush'](canvas);
    }

    if (canvas.freeDrawingBrush) {
        canvas.freeDrawingBrush.color = $("#drawing-color").val();
        canvas.freeDrawingBrush.width = parseInt($("#drawing-line-width").val(), 10) || 1;
        canvas.freeDrawingBrush.shadowBlur = parseInt($("#drawing-shadow-width").val(), 10) || 0;
        canvas.freeDrawingBrush.shadowColor = $("#drawing-shadow-color").val();
        canvas.freeDrawingBrush.shadowOffsetY = parseInt($("#drawing-shadow-offset").val(), 10) || 0;
    }
}

var vLinePatternBrush = new fabric.PatternBrush(canvas);
vLinePatternBrush.getPatternSrc = function () {
    this.canvas = canvas;
    var patternCanvas = fabric.document.createElement('canvas');
    patternCanvas.width = patternCanvas.height = 10;
    var ctx = patternCanvas.getContext('2d');

    ctx.strokeStyle = $("#drawing-color").val();
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(0, 5);
    ctx.lineTo(10, 5);
    ctx.closePath();
    ctx.stroke();

    return patternCanvas;
};

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 = $("#drawing-color").val();
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(5, 0);
    ctx.lineTo(5, 10);
    ctx.closePath();
    ctx.stroke();
    return patternCanvas;
};

all the above code I had added in separate file custom.js & calling that function in my index.html file like this:

$("#drawing-mode-selector").on("change", function (){
    getFabricBrush($(this).val());
});

But when I am clicking on canvas area I am getting this error:

TypeError: this.canvas is undefined fabric.js:7356:8
TypeError: this.canvas is undefined fabric.js:7436:6

This is happening for hline,vline,square,diamond & texture. In where I did mistake? Any idea?

来源：https://stackoverflow.com/questions/32689070/fabricjs-freedrawing-hline-brush

标签

javascript

jquery

canvas

fabricjs