在画布背景或矩形中打一个洞

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

如果只是一个正方形需要裁剪，你可以简单地在它周围画4个正方形，背景色。

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

Answer 3

我知道我迟到了，但这对一些可以寻找答案的用户很有用

drawRectangleWithHole(document.getElementById('canvas').getContext('2d'), "black", 50, 50, 200, 200, 50, 50, 100, 100)

function drawRectangleWithHole(ctx, color, x, y, width, height, holeX, holeY, holeWidth, holeHeight) {
  ctx.fillStyle = color
  ctx.fillRect(x, y, holeX, height)
  ctx.fillRect(x, y, width, holeY)
  ctx.fillRect(x + holeX + holeWidth, y, width - (holeX + holeWidth), height)
  ctx.fillRect(x, y + holeY + holeHeight, width, height - (holeY + holeHeight))
}

<canvas id="canvas" width="300" height="300"><canvas>

注意孔的 X 和 Y 坐标是相对于矩形的