Fabricjs background with transparent parts

Question

У меня есть холст Fabric.js с фоновым изображением, которое имеет несколько прозрачных частей. Я хочу, чтобы прозрачные части отображали цвет div за холстом (например, красный). Так что это работает:

canvas.setBackgroundColor(null); 
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas), { 
    opacity: 1.0 
}); 

Теперь скажите, что я хочу изменить непрозрачность изображения до 0,3. В этом случае непрозрачные части изображения показывают красный снизу. Но я хотел бы, чтобы прозрачные части отображали красный цвет, а непрозрачные части были выцветшими на белом фоне. Это возможно?

Answer 1

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

Например:

var canvas = new fabric.Canvas('fabric'); 
 
canvas.backgroundColor = 'green'; 
 
canvas.renderAll(); 
 

 
fabric.Image.fromURL("https://i.imgur.com/aSEcfuz.png", function(img){ 
 
    img.left = 0; 
 
    img.top = 0; 
 
    img.width = 200; 
 
    img.height = 200; 
 
    canvas.add(img); 
 
});

<canvas id="fabric" width="500" height="500"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>

Обход который помещает белый фон за изображения и перемещает его вместе с изображением:

var canvas = new fabric.Canvas('fabric'); 
 
canvas.backgroundColor = 'green'; 
 
canvas.renderAll(); 
 
var sharedProperties = { 
 
    left: 0, 
 
    top: 0, 
 
    width: 200, 
 
    height: 200 
 
}; 
 
var image; 
 

 
var rect = new fabric.Rect({ 
 
    left: sharedProperties.left, 
 
    top: sharedProperties.top, 
 
    fill: 'white', 
 
    width: sharedProperties.width, 
 
    height: sharedProperties.height 
 
}); 
 
canvas.add(rect); 
 

 
fabric.Image.fromURL("https://i.imgur.com/aSEcfuz.png", function(img) { 
 
    image = img; 
 
    img.left = sharedProperties.left; 
 
    img.top = sharedProperties.top; 
 
    img.width = sharedProperties.width; 
 
    img.height = sharedProperties.height; 
 
    canvas.add(img); 
 
    image.on('moving', function(event) { 
 
    rect.set({ 
 
     left: image.left, 
 
     top: image.top 
 
    }); 
 
    rect.setCoords(); 
 
    }); 
 
});

<canvas id="fabric" width="500" height="500"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>