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