fabric.js：ストロークでユニークで透明な形を作る方法は？

Question

fabric.jsで自由に図形を描きたい。アウトラインは、20px（ユーザーがそれをはっきりと見えるように）です。

ユーザーが描画した後、図形はアウトラインと同じ色で塗りつぶされているはずです。

すべてが半透明である必要があります。残念なことに、これによりアウトラインと塗りつぶしのオーバーラップがより透明でなくなり、形状に奇妙な「内側の輪郭」が描画されます。

形状を一意に半透明にする方法はありますか？

ユーザーが図形を描画した後、図形を輪郭の太さの半分に「広げ」、輪郭の太さを1に設定することは可能でしょうか？

たとえば、https://jsfiddle.net/4ypdwe9o/以下を参照してください。

var canvas = new fabric.Canvas('c', { 
 
    isDrawingMode: true, 
 
    
 
}); 
 
    
 
canvas.freeDrawingBrush.width = 10; 
 
canvas.freeDrawingBrush.color = 'rgb(255, 0, 0)'; 
 

 
canvas.on('mouse:up', function() { 
 

 
    canvas.getObjects().forEach(o => { 
 
    o.fill = 'rgb(255, 0, 0)'; 
 
    o.opacity = 0.5; 
 
    }); 
 
    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>

Answer 1

、彼らには別の実装があります。私は

fabricCanvasObject.getObjects('path').slice(-1)[0].setFill("red"); 
fabricCanvasObject.getObjects('path').slice(-1)[0].setOpacity(0.5); 

代わりの

fabricCanvasObject.getObjects('path').slice(-1)[0].fill = "red"; 
fabricCanvasObject.getObjects('path').slice(-1)[0].opacity = 0.5; 

を使用すると境界が重複することなく、正確に描かれています。したがって、Januszの答えからの一時的キャンバスはもはや必要ではありません。私の以前のfabric.js 1.5.0ではJanuszの答えが問題を解決しました。

Answer 2

Jetic、

あなたはほとんどあなたのロジックを終えています。代わりに、「不透明度」の使用RGBAを使用する：

canvas.getObjects().forEach(o => { 
    o.fill = 'rgba(255, 0, 0, 0.5)'; 
    o.stroke = 'rgba(255, 0, 0, 0)'; 
    // o.opacity = 0.5; 
    }); 
    canvas.renderAll(); 

Answer 3

それは少しトリッキーですが、一時的なキャンバスを使用して解決することができます。だから、最初にこのようなメインキャンバスにそれをコピーし、一時的なキャンバスに塗りつぶしソリッドカラーを使用してパスを描画：

//create temporary canvas 
var tmpCanvas = document.createElement("canvas"); 
tmpCanvas.width = canvas.width; 
tmpCanvas.height = canvas.height; 
var tmpCtx = tmpCanvas.getContext("2d"); 

//remember the original render function 
var pathRender = fabric.Path.prototype.render; 

//override the Path render function 
fabric.util.object.extend(fabric.Path.prototype, { 
    render: function(ctx, noTransform) { 

    var opacity = this.opacity; 

    //render the path with solid fill on the temp canvas 
    this.opacity = 1; 
    tmpCtx.clearRect(0, 0, tmpCanvas.width, tmpCanvas.height); 
    pathRender.apply(this, [tmpCtx]); 
    this.opacity = opacity; 

    //copy the path from the temp canvas 
    ctx.globalAlpha = opacity; 
    ctx.drawImage(tmpCanvas, 0, 0); 

    } 
}); 

ここで見るのplunker：fabric.js 1.7.3でhttps://plnkr.co/edit/r1Gs2wIoWSB0nSS32SrL?p=preview