Question

我使用“fabricjs”，我很难理解clipTo的用法。事实上，我想在我的画布上制作一个面具，但不是在物体/背景上。面具有SVG形状。 我的版本是1.7.3。

由于

Answer 1

我担心你不能轻易地使用SVT和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

FabricJS clipTo，除了对象之外的掩码

1 个答案: