Question

我正在跟随从这里创建自由绘制：http://fabricjs.com/freedrawing/它与铅笔，圆形，喷雾和放大器一起正常工作模式但不适用于hline，vline，square，diamond＆amp;质地。我之前已经像这样定义了画布：

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

我创建了这样的免费绘图功能：

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;
};

我在单独的文件custom.js＆amp;中添加的所有上述代码在我的index.html文件中调用该函数，如下所示：

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

但是当我点击画布区域时，我收到了这个错误：

TypeError：this.canvas未定义fabric.js：7356：8
TypeError：this.canvas是undefined fabric.js：7436：6

这适用于hline，vline，square，diamond＆amp;质地。在哪里我错了？有什么想法吗？

Fabricjs自由绘制hline画笔

0 个答案: