我正在使用Fabric js,遇到一个问题,我必须将用户添加的对象(文本,图像,svg等)剪辑到画布中设置的背景图像.背景图像可以是png或svg(具有多路径).背景图像的形状不均匀,例如叶子,衬衫等.

怎么做？

解决方法:

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>

此代码段向您展示了可行的方法.用“图像”剪辑不容易.正如我所展示的,您可以做的是使用globalCompositeOperation.

如您所见,rect和circle仅在背景上可见,而在外部则不可见.

如果要使用“ source-atop”以外的其他值,则可以获得不同的效果.使用“ source-in”,背景将是透明的,并且将成为“剪切”区域的唯一障碍