如何隐藏画布中的照片溢出? [英] How to hide the overflow of photos in canvas?

问题描述

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

I am trying making a photo frame pattern on canvas. In which I want to put two, three or maybe more photos under an overlay frame. Where few parts of the overlay frame are transparent.

如果我将photo1上传到帧的第一部分，则它也可见到第二部分，并且将photo2上传到第二部分，也可见到第一部分.取决于首先上传还是最后编辑的照片，是与另一张照片重叠.

If I upload photo1 into first section of frame its visible into second section also and uploading photo2 into section two is also visible into first section. Depending on which photo is uploaded first or edited at last is overlapping the other photo.

我想知道如何隐藏照片的溢出部分，这样其他部分就看不到它了.我该如何实现?

I want to know how to hide the overflow of photo so it should not be visible into other sections. How can I achieve this?

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

I have done this so far:

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

    });
}

请为我提供最佳解决方案

Kindly provide me the best solution

推荐答案

您需要在图片上应用clipTo()方法.

You need to apply a clipTo() method onto the image.

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

这个小提琴展示了技巧

小提琴

这篇关于如何隐藏画布中的照片溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！