Fabric js将对象裁剪到背景图像

Question

我正在使用fabric js，并遇到了一个问题：我需要将用户添加的对象（文本、图像、svg等）剪切到在画布上设置的背景图像中。背景图片可以是png或svg（具有多个路径）。背景图片的形状是不均匀的，例如叶子、衬衫等。

怎样才能做到这一点呢？

- eulercode

---

你的问题完全不可接受，抱歉；http://stackoverflow.com/help/mcve - ale

Answer 1

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/a/a2/Litchi_chinensis_leaf.png',
  function(img){
img.scale(0.3);
canvas.setBackgroundImage(img);
canvas.renderAll();
  }
);

var rect = new fabric.Rect({
  width:80, height:100, fill:'red',
  globalCompositeOperation: 'source-atop',
  top: 100
});
canvas.add(rect);

var circle = new fabric.Circle({
  radius:80, height:100, fill:'blue',
  globalCompositeOperation: 'source-atop'
});
canvas.add(circle);
circle.center().setCoords();

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

这段代码展示了可行的操作。使用"image"剪切并不容易。你可以使用全局合成操作(globalCompositeOperation)来实现。

如你所见，矩形和圆仅在背景内可见，而在外部不可见。

如果您想使用与"source-atop"不同的值，则可以获得不同的效果。使用"source-in"，背景将透明，并且只用于"剪切"区域。

- AndreaBogazzi

---

@AdreaBogazzi 这在使用文本对象时也可能吗？ - Bhupendra Jadeja

文本对象在地面或前景中？ - AndreaBogazzi

无论如何，都可以使用文本作为形状来剪辑图像，或者使用图像作为形状来剪辑文本。 - AndreaBogazzi

我使用了globalCompositeOperation，但如果您检查我提供的示例，则无法正常工作。 - Bhupendra Jadeja

请打开另一个Stack Overflow问题，解释您从这个答案中获取了代码，但无法使其工作。我愿意提供帮助，但我需要一个简单的模型“问题+失败代码示例”，因为我没有太多的空闲时间。 - AndreaBogazzi

@AdreaBogazzi 这是我的问题和失败的代码。您能否看一下，我只希望它类似于这张图片 http://stackoverflow.com/questions/39833992/masking-image-and-text-in-fabric-js - Bhupendra Jadeja