如何隐藏画布中的照片溢出？答案

【问题标题】：How to hide the overflow of photos in canvas?如何隐藏画布中的照片溢出？
【发布时间】：2015-07-08 17:27:06
【问题描述】：

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

如果我将 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();
        }

    });
}

请给我最好的解决方案

【问题讨论】：

给我们看一些代码，到目前为止你尝试了什么。
@Grumpy 我已经用代码更新了我的问题。到目前为止，我已经这样做了。我正在使用织物 js。

标签： html css fabricjs

【解决方案1】：

您需要在图像上应用一个 clipTo() 方法。

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);
    });
});

这把小提琴展示了技巧

Fiddle

【讨论】：