Я пытаюсь создать редактор футболок, используя Fabri c. Я установил рубашку в качестве фонового изображения на холсте. Теперь я пытаюсь получить область в середине футболки, которая будет действовать как обтравочная маска. Я хочу, чтобы объекты, которые находятся внутри этой области, были видны.
Вот мой код: http://jsfiddle.net/mtb2p3Lx/4/
var canvas = new fabric.Canvas('c');
// set background
fabric.Image.fromURL('https://qstomizr.s3.amazonaws.com/11102-9LDAQLKA1585254870.5083.jpg', (img) => {
canvas.setBackgroundImage(img, null, {
originX: 'center',
originY: 'center',
top: canvas.getCenter().top,
left: canvas.getCenter().left,
stroke: 'black',
strokeWidth: 1,
});
canvas.renderAll();
});
// set masking area
var area = new fabric.Rect({
originX: 'center',
originY: 'center',
top: this.canvas.getCenter().top,
left: this.canvas.getCenter().left + 10,
width: 250,
height: 300,
selectable: false,
fill: 'transparent',
stroke: 'black',
strokeWidth: 2,
});
canvas.add(area)
// set example rect
var rect = new fabric.Rect({
originX: 'center',
originY: 'center',
top: this.canvas.getCenter().top + 50,
left: this.canvas.getCenter().left + 150,
height: 100,
width: 100,
fill: 'pink',
});
canvas.add(rect)
Я попытался добавить путь к клипу в area
rect, также пытался поиграться с globalCompositeOperation
, но я не мог заставить что-либо работать, не жертвуя фоновым изображением.
Есть ли способ заставить прямоугольник прозрачной области действовать как обтравочная маска для других объектов на холсте?