Kinetic js 5.1 globalCompositeOperation как

Question

Я довольно новичок в Kinetic JS. Я пытаюсь заставить некоторые.globalCompositeOperation работать в 2 частях проекта, который я имею, я попробовал несколько решений, которые я могу найти здесь, используя 'drawFunc', 'sceneFunc' и т. Д., Но пока что не повезло.

Одна часть проекта, я пытаюсь заставить 'назначение-выход' работать над кинетикой.

var strokesSprite = new Kinetic.Sprite({
                        image: e,
                        animation: 'intro',
                        animations: {
                            'intro': config.spritestrokes.frames
                        },
                        frameRate: 7,
                        frameIndex: 0,
                        sceneFunc: function (ctx) {
                            ctx.save();
                            ctx.globalCompositeOperation = 'destination-out';
                            ctx.restore();
                        }

    var strokes = new Kinetic.Layer({
                        width: 1280,
                        height: 1280,
                        x: stage.getWidth() / 2,
                        y: stage.getHeight() / 2,
                        offset: {
                            x: 1280 / 2,
                            y: 1280 / 2
                        }
                    });
                    strokes.add(backgroundPainted);
                    strokes.add(strokesSprite);
                    strokes.draw();
                    stage.add(strokes);

"backgroundPainted" - это кинетическое изображение

К сожалению, все, что я здесь получаю, это спрайтовый слой, анимируемый поверх backgroundPainted, но не применяется составная операция:(.

Для второго экземпляра, который на самом деле очень похож, у меня просто 2 слоя, оба с фигурами внутри, добавленные на сцену. Я применяю тот же 'sceneFunc' к слою сверху и затем рисую их. Отображаются только оба слоя, без применения композиции.:(

Какие-нибудь указатели на то, на что я должен смотреть? Я вижу, что, например, "drawFunc" недавно был изменен на "sceneFunc", и, возможно, что-то изменилось, поскольку я попробовал почти все примеры, которые я могу найти здесь, в стеке.

Спасибо

Answer 1

KineticJS не поддерживает globalCompositeOperation ,

KineticJS предоставляет вам обертку вокруг контекста холста html5, но эта обертка является подмножеством контекста, который не включает свойство context.globalCompositeOperation.

Обходной путь

Вы можете создать элемент canvas (не добавляя его на страницу). Сделайте свою композицию на этом закадровом холсте. Чтобы представить этот холст внутри KineticJS, просто создайте Kinetic.Image со свойством изображения, указывающим на внеэкранный холст:

var myOffscreenCanvas=document.createElement("canvas");

... do compositing ...

// this Kinetic.Image will display myOffscreenCanvas

var myCompositedImage = new Kinetic.Image({

    image:myOffscreenCanvas,

    ...

});