Я хочу установить глобальный clipTo в моем холсте, наполненном Fabric, который повлияет на все слои, добавленные пользователем. Я хочу фоновое изображение и оверлейное изображение, которые не подвержены этой маске клипа.
Пример:
Вот что происходит на этой фотографии:
canvas.clipTo, которая закрепляет холст в прямоугольной формеЯ хочу, чтобы пользовательское изображение (мопс) было ограничено прямоугольной областью.
Я делаю не изображение фонового изображения (форма синей футболки), на которое влияет область клипа.
Есть ли простой способ сделать это? Я действительно не хочу добавлять clipTo на каждый отдельный пользовательский слой, а не один аккуратный глобальный clipTo.
Вы можете играть со скриптом JS, отображающим проблему здесь.
Одно (sorta hacky) решение: установите фоновое изображение CSS на ваш элемент canvas, как показано в https://jsfiddle.net/qpnvo3cL/
<canvas id="c" width="500" height="500"></canvas>
<style>
background: url('http://fabricjs.com/assets/jail_cell_bars.png') no-repeat;
</style>
<script>
var canvas = window._canvas = new fabric.Canvas('c');
canvas.clipTo = function(ctx) {
ctx.rect(100,100,100,100);
}
</script>
Я пришел сюда с такой же потребностью и в конечном итоге нашел решение для того, над чем я работаю. Может быть, это помогает:
Для путей SVG в функции clipTo вы можете изменить ctx непосредственно перед вызовом render(ctx), и эти изменения применяются за пределами обрезанного пути o. Например:
var clipPath = new fabric.Path("M 10 10 L 100 10 L 100 100 L 10 100", {
fill: 'rgba(0,0,0,0)',
});
var backgroundColor = "rgba(0,0,0, 0.2)";
var opts = {
controlsAboveOverlay: true,
backgroundColor: 'rgb(255,255,255)',
clipTo: function (ctx) {
if (typeof backgroundColor !== 'undefined') {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, 300, 150);
}
clipPath.render(ctx);
}
}
var canvas = new fabric.Canvas('c', opts);
canvas.add(new fabric.Rect({
width: 50,
height: 50,
left: 30,
top: 30,
fill: 'rgb(255,0,0)'
}));
Вы можете, конечно, добавить изображение вместо цвета или все, что вы хотите сделать. Трюк, который я нашел, заключается в том, чтобы напрямую включить его в функцию clipTo на ctx.
Вы пробовали обрезать ткань Group? Вы могли бы сделать всю рубашку одной полосой. Центральная графика будет одной группой, которую вы кликаете туда, где вы хотите. Белая футболка и синяя накладка, конечно, не будут частью обрезанной группы.
Здесь пример отсечения группы:
var rect = new fabric.Rect({width:100, height: 100, fill: 'red' });
var circle = new fabric.Circle({ radius: 100, fill: 'green' });
var group1 = new fabric.Group([ circle, rect ], { left: 100, top: 100 });
canvas.add(group1);
group1.clipTo = function(ctx) {
ctx.rect(50,50,200,200);
};
См. этот jsfiddle, который я сделал: https://jsfiddle.net/uvepfag5/4/
Я считаю, что клип довольно медленный, поэтому я стараюсь использовать globalCompositeOperation для маскировки.
Если вам действительно нужно использовать клип, используйте его вместе с сохранением и восстановлением.
// ctx is canvas context 2d
// pug is the image to be clipped
// draw your background
ctx.save(); // save state
ctx.rect(100,100,100,100); // set the clip area
ctx.clip(); // apply the clip
ctx.drawImage(pug,x,y); // draw the clipped image
ctx.restore(); // remove the clipping
// draw the other layers.
или вы можете
// draw background
ctx.globalCompositeOperation = "xor"; // set up the mask
ctx.fillRect(100,100,100,100); // draw the mask, could be an image.
// Alpha will effect the amount of masking,
// not available with clip
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(pug,x,y); // draw the image that is masked
ctx.globalCompositeOperation = "source-over";
// draw the stuff that needs to be over everything.
Преимущество составных операций заключается в том, что у вас есть контроль над отсечением на уровне пикселей, в том числе объем отсечения с помощью альфа-значения пикселя