如何在画布中隐藏照片溢出？

Question

我正在尝试在画布上制作相框图案。其中我想在叠加帧下放置两张，三张或更多张照片。覆盖框架的很少部分是透明的。

如果我将photo1上传到第一部分框架中，它也可以显示在第二部分中，并将photo2上传到第二部分也可以在第一部分中看到。根据首先上传的照片或最后编辑的照片与另一张照片重叠。

我想知道如何隐藏照片的溢出，以便它不会在其他部分中显示。我怎样才能做到这一点？

到目前为止我已经这样做了：

canvas.on({
    'object:moving': onChange,
    'object:scaling': onChange,
    'object:rotating': onChange,
});

function onChange(options) {
    options.target.setCoords();
    canvas.forEachObject(function (obj) {
        if (obj === options.target)
            return;


        if (obj.id != 'cover1' && obj.id != 'cover2')
            return;


        if (options.target.intersectsWithObject(obj)) {

           // Hide this portion

            canvas.renderAll();
        }

    });
}

请为我提供最佳解决方案

Answer 1

您需要将clipTo（）方法应用到图像上。

＆＃13;

＆＃13;

var canvas;

$(function(){
    canvas = window._canvas = new fabric.Canvas('canvas');
    var radius = 200;
    fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
      img.scale(0.5).set({
        left: 250,
        top: 250,
        angle: -15,
        clipTo: function (ctx) {
          ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
        }
      });
      canvas.add(img).setActiveObject(img);
    });
});

＆＃13;

＆＃13;

＆＃13;

这个小提琴显示了技巧

Fiddle