Сделайте отверстие в холсте или в прямоугольнике

Question

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

Я создал скрипку, чтобы проиллюстрировать мою проблему: http://jsfiddle.net/goooseman/5xLE4/2/ (Мне нужен фон, чтобы быть прозрачным под квадратом).

Я думаю, что невозможно сделать отверстие в фоновом режиме, но мы можем использовать другой прямоугольник в качестве фона. Я создал еще одну скрипку, чтобы показать: http://jsfiddle.net/goooseman/cNJwL/1/ Я использую этот код, чтобы сделать фон прямоугольник:

var backgroundRect = new fabric.Rect({ 
    left: 0, 
    top: 0, 
    fill: 'red', 
    width: canvas.width, 
    height: canvas.height 
}); 

Но как я могу сделать отверстие в фоновом режиме прямоугольника под верхним прямоугольником?

Answer 1

Может быть, это может помочь (как найти в this question).

Необходимо сначала добавить объект фона холста, к которому вы хотите выполнить «отверстие». Затем вы создаете новый объект (резак) и устанавливаете свойство globalCompositeOperation = 'destination-out', а затем добавляете его на холст.

Так же, как это:

var h = new fabric.Rect({width: canvas.width, height: canvas.height, fill: 'rgba(0,0,0,0.5)'}) 
var z = new fabric.Circle({radius: 100, top:100, left: 100, globalCompositeOperation: 'destination-out'}) 
canvas.add(h).add(z) 

Таким образом, вы добавляете первый глобальный объект, а затем добавить объект как «резак». Я думаю, что он будет действовать как резак для всего, поэтому, если у вас есть другие объекты «позади», они тоже будут обрезаны (не проверял его).

Надеюсь, что это поможет!

Answer 2

Если это просто квадрат, который нужно вырезать, вы можете просто нарисовать вокруг него четыре квадрата с цветом фона.

fabric.StaticCanvas('canvas'); 
canvas.setHeight(300); 
canvas.setWidth(300); 

var bgrect = new fabric.Rect({ 
    left:0, 
    top:0, 
    fill: 'red', 
    width: 100, 
    height: 300, 
}); 
canvas.add(bgrect); 
bgrect = new fabric.Rect({ 
    left:200, 
    top:0, 
    fill: 'red', 
    width: 100, 
    height: 300, 
}); 
canvas.add(bgrect); 
canvas.add(bgrect); 
bgrect = new fabric.Rect({ 
    left:100, 
    top:0, 
    fill: 'red', 
    width: 100, 
    height: 100, 
}); 
canvas.add(bgrect); 
bgrect = new fabric.Rect({ 
    left:100, 
    top:200, 
    fill: 'red', 
    width: 100, 
    height: 100, 
}); 
canvas.add(bgrect); 

См this fiddle