Question

我使用fabric.js，我需要一个透明的矩形在画布上，但我需要使用背景问题是我需要背景在rect下透明。

我创造了一个小提琴来说明我的问题： http://jsfiddle.net/goooseman/5xLE4/2/（我需要背景在广场下透明）。

我认为在背景中打洞是不可能的，但我们可以使用另一个矩形作为背景。我创造了另一个小提琴来展示它：http://jsfiddle.net/goooseman/cNJwL/1/ 我使用这段代码来制作后台rect：

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坐标是相对于矩形的

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

3 个答案: