fabric.js：フリーハンドパスを塗りつぶしてシェイプを描くにはどうすればよいですか？

Question

fabric.jsではフリーハンドパスを描画できます（例：http://fabricjs.com/freedrawing）。

しかし、HTMLキャンバス2D-コンテキストctxに、私はまた、パスを描画して、パスを記入し、パスの記入形状を作るために

ctx.fill（）

を呼び出すことができます。

例コード：マウスが上がると、パスが埋められます。

function draw() { 

ctx.lineCap = "round"; 
ctx.globalAlpha = 1; 

var x = null; 
var y = null; 

canvas.onmousedown = function (e) { 

    // begin a new path 
    ctx.beginPath(); 

    // move to mouse cursor coordinates 
    var rect = canvas.getBoundingClientRect(); 
    x = e.clientX - rect.left; 
    y = e.clientY - rect.top; 
    ctx.moveTo(x, y); 

    // draw a dot 
    ctx.lineTo(x+0.4, y+0.4); 
    ctx.stroke(); 
}; 

canvas.onmouseup = function (e) { 
    x = null; 
    y = null; 
    ctx.fill(); 
}; 

canvas.onmousemove = function (e) { 
    if (x === null || y === null) { 
     return; 
    } 
    var rect = canvas.getBoundingClientRect(); 
    x = e.clientX - rect.left; 
    y = e.clientY - rect.top; 
    ctx.lineTo(x, y); 
    ctx.stroke(); 
    ctx.moveTo(x, y); 
} 

}

は、同様の挙動がfabricjsでも可能ですか？

fabricjsはパスのみを保存するように見えますが、塗りつぶし領域は保存していないようです。生地に描画

おかげで、 ピーター

Answer 1

は、パスオブジェクトの束を生成して、あなただけの他のほとんどの生地のオブジェクトのようにそれらに塗りつぶしを追加することができます。

var canvas = new fabric.Canvas('c', { 
 
    isDrawingMode: true 
 
}); 
 

 
canvas.on('mouse:up', function() { 
 
    canvas.getObjects().forEach(o => { 
 
    o.fill = 'blue' 
 
    }); 
 
    canvas.renderAll(); 
 
})

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 

 
<canvas id="c" width="600" height="600"></canvas>

：ここでは、オートまでマウスで青い背景にそれぞれ作成されたオブジェクトを設定します例スクリプトです