前端 canvas 使用 fabric.js 如何做出限制显示的效果？

Question

举个例子，有一个画布，上面设定一个区域，图片在区域里面都可以显示，但移动图片到这个区域之外，就会隐藏看不到，这样的需求应该怎么做呢？

如果能给一个思路也是可以的，感谢各位大神的回答

个人的思路，给每个添加到 canvas 的图片加一个相同的裁剪

var logoImg = new Image();
logoImg.onload = function (img) {    
    var logo = new fabric.Image(logoImg, {
        angle: 10,
        width: 550,
        height: 190,
        left: 150,
        top: 50,
        scaleX: 0.25,
        scaleY: 0.25,
        clipName: 'logo',
        clipTo: function(ctx) { 
            return _.bind(clipByName, logo)(ctx) 
        }
    });
    canvas.add(logo);
};
logoImg.src = img01URL;

Answer 1

其实方法很简单，重点其实就是注意一个参数 absolutePositioned 设定为 true 时就会相对于父容器，对父容器进行裁剪，否则就是裁剪图片本身。

const clipPath = new fabric.Rect({
    width: 300,
    height: 200,
    top: 200,
    left: 20,
    absolutePositioned: true
});
fabric.Image.fromURL('src.png', (img) => {
    img.clipPath = clipPath;
    img.set({
      top: 250,
      scaleX: 0.2,
      scaleY: 0.2
    })
    this.canvas.add(img);
}, { crossOrigin: 'anonymous' })

参考文档：http://fabricjs.com/clippath-part4

Answer 2

可以使用canvas的clip功能，将区域之外的内容裁减掉

context.save();
context.beginPath();
pixs.forEach((point, index) => {
  if(!index){
    context.moveTo(point[0], point[1]);
  }else{
    context.lineTo(point[0], point[1]);
  }
})
context.clip(); //裁剪画布