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

Fabric js clip object to background image

本文关键字：背景 图像 js 对象 Fabric      更新时间：2023-09-26

我正在开发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，如我所示。

正如你所看到的，矩形和圆形只能在背景上看到，而不能在外面看到。

如果你想使用"源顶"以外的其他值，你可以获得不同的效果。在"源在"的情况下，背景将是透明的，并将为"剪切"区域

的唯一用户提供服务
相关文章：