Kinetic js 5.1 globalCompositeOperation 如何

Question

我对 Kinetic JS 还很陌生。 我试图让一些 .globalCompositeOperation 在我拥有的项目的两个部分中工作，我尝试了几种可以在这里找到的解决方案，使用“drawFunc”和“sceneFunc”等......但到目前为止还没有运气。

项目的一部分我试图让“目的地”在 kinetic.Sprite 上工作：

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" 是 Kinetic.Image

不幸的是，我在这里得到的只是精灵图层在“backgroundPainted”之上进行动画处理，但没有应用复合操作:(。

对于我的第二个实例，它实际上非常相似，我只有 2 个图层，都在里面有形状，添加到舞台上。我将相同的“sceneFunc”应用到顶部的图层，然后绘制它们。 两个图层都显示，没有应用合成。 :(

关于我应该看什么的任何指示？我看到例如“drawFunc”最近已更改为“sceneFunc”，也许还有其他一些变化，因为我已经尝试了几乎所有可以在堆栈上找到的示例。

谢谢

Answer 1

KineticJS 不支持globalCompositeOperation。

KineticJS 为您提供了一个围绕 html5 画布上下文的包装器，但该包装器是不包含 context.globalCompositeOperation 属性的上下文的子集。

解决方法

您可以创建画布元素（无需将其附加到页面）。在屏幕外的画布上进行合成。要在 KineticJS 中显示该画布，只需创建一个 Kinetic.Image ，其 image 属性指向屏幕外的画布：

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

... do compositing ...

// this Kinetic.Image will display myOffscreenCanvas

var myCompositedImage = new Kinetic.Image({

    image:myOffscreenCanvas,

    ...

});