Fabric.js Холст клипа (или группа объектов) В Polygon

У меня есть холст, нарисованный в Fabric.js, что я добавляю группу прямоугольников, я хочу ограничить края этих прямоугольников как группу, чтобы не выйти за пределы определенной области.

Представьте, что вы делаете полосатую футболку, полоски делаются с помощью ряда прямоугольников, и мне нужно держать их в форме футболки.

Я думаю, что лучше всего закрепить весь холст в форме футболки, поэтому все, что я добавляю к нему, остается в футболке, но я застрял. Пока я только клип к основным кругам и прямоугольникам.

благодаря

Вы можете просто визуализировать фигуру внутри canvas.clipTo 🙂

Я только что загрузил случайную форму SVG на кухне и сделал следующее:

 var shape = canvas.item(0); canvas.remove(shape); canvas.clipTo = function(ctx) { shape.render(ctx); };

холст, обрезанный до формы

Как вы можете видеть, весь холст теперь обрезается этой формой SVG.

Вы также можете попробовать следующее: http://jsfiddle.net/ZxYCP/198/

введите описание изображения здесь

 var clipPoly = new fabric.Polygon([ { x: 180, y: 10 }, { x: 300, y: 50 }, { x: 300, y: 180 }, { x: 180, y: 220 } ], { originX: 'left', originY: 'top', left: 180, top: 10, width: 200, height: 200, fill: '#DDD', /* use transparent for no fill */ strokeWidth: 0, selectable: false });

Вы можете просто использовать Polygon для клипа. Ответ основан на идее @natchiketa в этом вопросе. Несколько областей отсечения на холсте Fabric.js