Question

我有一个背景，我把图像（手机壳）。之后我在顶部放了一个矩形（50％顶部）。（帆布）在那个我把一个svg作为另一个掩码（跟随案例曲线）。

svg与整个背景的大小相同。所以只有顶部的SVG我才能＃34;剪辑＆＃34;它上面有一个矩形。

    var clipTo = function(ctx) {
  var w = mask.width, h = mask.height;
  var x = -w/2, y = -h/2;
  var rx = 0, ry = 0;

  ctx.moveTo(x+rx, y);
  ctx.lineTo(x+w-rx, y);
  ctx.lineTo(x+w, y+(h/2)-ry);
  ctx.lineTo(x+rx,y+(h/2));
  ctx.lineTo(x,y+ry);
  ctx.closePath();
 };
mask.setClipTo(clipTo);

它工作正常。但是当我在其上放置一个可拖动的图像时，图像被SVG掩盖，但不是剪辑矩形，就像剪辑仍然存在一样。（在图像中，红色矩形的内容应该是不可见的）

我发现有一个剪辑规则： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-rule

也许运气可能最终应该这样做，但我不知道如何在javascript中应用它（我使用fabricjs）

所以如果有人有想法......：）

谢谢

带有剪辑规则的Javascript SVG clipto（fabricjs）

0 个答案: