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

【问题标题】：FabricJS clipTo, mask except on an objectFabricJS clipTo，除了对象之外的掩码
【发布时间】：2017-11-15 06:09:55
【问题描述】：

我使用“fabricjs”，但很难理解 clipTo 的使用。事实上，我想在我的所有画布上制作一个蒙版，而不是在一个对象/背景上。 Mask 具有 SVG 形状。 我使用的是 1.7.3 版本。

谢谢

【问题讨论】：

请添加您的代码。到目前为止你做了什么？
这里是：jsfiddle.net/6w7jo33v/22
你的例子正在做你需要的。不明白的地方能详细点吗？
第 16 行我想在画布中显示背景图像。但是 cliptTo 阻止了这一点。

标签： canvas fabricjs mask

【解决方案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

【讨论】：

感谢您提供的示例帮助很大。最后一个问题，当我选择几个对象时，它们消失了。如何将剪辑应用到选定的组？ jsfiddle.net/CeeeJ/6w7jo33v/23