FabricJS clipTo，除了對象上的掩碼

Question

我使用「fabricjs」，並且我很難理解clipTo的用法。 確實，我想在我的所有畫布上製作一個蒙版，但不是在對象/背景上。面具有SVG形狀。 我在1.7.3版本。

感謝

Answer 1

恐怕你不能輕易使用clipTo與SVG。您必須修改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位。那個盒子將成爲你剪裁的邊界。您必須使用從100,100開始的新座標系更新SVG路徑並縮放座標。

我會推薦覆蓋兩個畫布一個如果爲背景，另一個爲您的操作。示例可以在這裏找到：https://stackoverflow.com/a/44494261/7132835