javascript - 在 Canvas 上自由绘图变得模糊

Question

当我在织物上使用自由绘图时，有时绘图会变得模糊!这是一张演示问题的图片:

这是完整的代码:

var Operations = {
    freeDrawing:0,
    selection:1,
    move:2,
    erease:3
};
var Options = {
    EraseBrush:"#ffffff",
    DrawingBrushColor:'#005E7A',
    DrawingBrushWidth:'16',
    PrushPattern:'pencil',
    EraserWidth:'24'
};
var BrushePatterns = {
    Pencil:'pencil',
    Circle:'circle',
    Spray:'spray',
    Pattern:'pattern',
    HLine:'hline',
    VLine:'vline',
    Square:'square',
    Diamond:'diamond',
    Texture:'texture'
};
var app = (function(){
    var application={};
    var canvas = window.__canvas = new fabric.Canvas('board',{defaultCursor :'crosshair',isDrawingMode:true,selection:true});
    fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding:5});
    canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
    if (canvas.freeDrawingBrush) {
        canvas.freeDrawingBrush.color = Options.DrawingBrushColor;
        canvas.freeDrawingBrush.width = Options.DrawingBrushWidth;
        canvas.freeDrawingBrush.shadow = new fabric.Shadow({
          blur: 0,
          offsetX: 0,
          offsetY: 0,
          affectStroke: true,
          color: Options.DrawingBrushColor,
        });
    }
    canvas.on('mouse:down',function(e){
    });
    canvas.on('mouse:up',function(e){

    });
    canvas.on('mouse:move',function(e){

    });
    /*  function resizeCanvas() {
        setTimeout(()=>{
            var canvasContainer=document.getElementById('ccontainer');
            canvas.setHeight(canvasContainer.clientHeight);
            canvas.setWidth(canvasContainer.clientWidth);
            canvas.renderAll();
        },500);
    }*/
    application.activateDrawingMode=function(){
        toggleOperation(Operations.freeDrawing);
    }
    application.activateEraseMode = function(){
        toggleOperation(Operations.erease);
    }
    application.activateMousePointerMode = function(){
        toggleOperation(Operations.selection);
    }
    function toggleOperation(operation){
        if(operation === Operations.freeDrawing){
            /*canvas.isDrawingMode=true;
            canvas.selection = false;
            canvas.freeDrawingBrush.color = Options.DrawingBrushColor;
            canvas.freeDrawingBrush.width = Options.DrawingBrushWidth;*/
        }
        else if(operation === Operations.erease){
            canvas.selection = false;
            canvas.freeDrawingBrush.color = Options.EraseBrush;
            canvas.freeDrawingBrush.width = Options.EraserWidth;
        }
        else if(operation === Operations.selection){
            canvas.isDrawingMode = false;
            canvas.selection = true;
        }
    }
    //resize on init
    //resizeCanvas();
    application.canvas=canvas;
    return application;
})();
function freeDrawingButtonclicked(){
    app.activateDrawingMode();
}
function pointerButtonClicked(){
    app.activateMousePointerMode();
}
function eraserButtonClicked(){
    app.activateEraseMode();
}

我用的是1.7.19版本的fabric，我有一个主页，里面既有fabric js文件，也有上面提到的文件。这些文件由 ASP.Net 核心 Web 应用程序使用。我看不出这段代码和那段代码有什么区别 http://fabricjs.com/freedrawing然而我的代码产生了这些模糊，我不知道为什么!

Answer 1

整晚拉扯我的头发后发现，如果您将 canvas.freeDrawingBrush.width 的值作为字符串传递，在引号 '14' 之间，您将得到这种模糊，但如果您将此值作为整数 14 传递，您将不会得到这种模糊。我认为这是一个错误，我将在 Fabric.JS GitHub 存储库中创建一个问题。不管怎样，我只是想让你知道问题出在哪里，所以我救了别人的头发。
干杯!