FabricJS clipTo、オブジェクト以外のマスク

Question

私は "fabricjs"を使用していますが、clipToの使用を理解するのは難しいです。 実際、私はすべてのキャンバスにマスクを作りたいが、オブジェクト/バックグラウンドにはマスクを作りたくない。マスクはSVGの形をしています。 バージョン1.7.3です。

おかげ

Answer 1

私はあなたがSVGで簡単にclipToを使用することはできません怖いです。 SVGのパスを変更し、そのパスの座標をクリッピングボックスに変更する必要があります。 クリッピングのための私の応答Creating complex clipping path for image?では、クリッピングシェイプの座標を変更する必要があります。

var scaleXTo1 = (1/pug.scaleX); 
     var scaleYTo1 = (1/pug.scaleY); 
     ctx.save(); 

     var ctxLeft = -(pug.width/2); 
     var ctxTop = -(pug.height/2); 

     ctx.translate(ctxLeft, ctxTop); 
     ctx.scale(scaleXTo1, scaleYTo1); 
     ctx.beginPath(); 
     console.log(points) 
     ctx.moveTo(points[0][0] - pug.oCoords.tl.x, points[0][1] - pug.oCoords.tl.y); 
     for (var i=1; i < points.length; i++){ 
     ctx.lineTo(points[i][0] - pug.oCoords.tl.x, points[i][1] - pug.oCoords.tl.y); 
     } 
     ctx.closePath(); 
     ctx.restore(); 
     }; 

たとえば、100,100から200,200の位置にクリップしたいとします。そのボックスはクリッピングのためのあなたの境界になります。 SVGパスを100,100から始まる新しい座標系で更新し、座標を拡大する必要があります。

私はオーバーレイ2のキャンバスを1つはバックグラウンド、もう1つは操作することをお勧めします。例はここにあります：https://stackoverflow.com/a/44494261/7132835