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

Question

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

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

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

Благодаря

Answer 1

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

Я просто загрузил случайную форму SVG в kitchensink и сделал это:

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

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

Answer 2

Вы также можете попробовать это: 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 в этом вопросе Multiple clipping areas on Fabric.js canvas