fabric.js canvas globalCompositeOperation с несколькими масками - фон невозможен в качестве пункта назначения - PullRequest
Новая
       54

fabric.js canvas globalCompositeOperation с несколькими масками - фон невозможен в качестве пункта назначения

0 голосов
/ 02 мая 2019

Я ожидаю, что это [Rect -> Круг 'source-atop' -> Background 'destination-over']

Layered canvas mask with background not affected

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

var canvas = new fabric.Canvas('c');

var red = new fabric.Rect({
    top: 0,
    left: 0,
    width: 300,
    height: 300,
    strokeDashArray: [5, 5],
    stroke: 'black',
    strokeWidth: 5,
    fill: 'red',
    rx: 40
});
canvas.add(red);

var blue = new fabric.Circle({
    top: 150,
    left: 80,
    radius: 100,
    strokeDashArray: [5, 5],
    stroke: 'black',
    strokeWidth: 5,
    fill: 'blue',
    globalCompositeOperation: 'source-atop'
});
canvas.add(blue);

const backgroundImage = new Image();
backgroundImage.src = "https://png.pngtree.com/thumb_back/fw800/back_pic/00/05/53/8756273ec88e3d3.png";

var backgroundLoadedCallback = null;
backgroundImage.onload = function() {
    if (typeof backgroundLoadedCallback === "function") {
        backgroundLoadedCallback();
    }
}

function canvasToTextarea() {

    const myCanvas = document.getElementById('c');
    const ctx = myCanvas.getContext("2d");
    ctx.globalCompositeOperation = "destination-over";
    ctx.drawImage(backgroundImage, 0, 0, ctx.canvas.width, ctx.canvas.height);
}

if (backgroundImage.complete) {
    canvasToTextarea();
} else {
    backgroundLoadedCallback = canvasToTextarea;
}

Вопрос: возможно ли сделать фон в fabric.js с помощью составной операции? Я нигде не могу найти что-нибудь об этой проблеме.

Спасибо за помощь здесь!

Скрипка: https://jsfiddle.net/Metamagikum/2Lpwchzd/50/

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

...