0

我对 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”，也许还有其他一些变化，因为我已经尝试了几乎所有我可以在堆栈上找到的示例。

谢谢

4

1 回答 1

0

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,

    ...

});
于 2014-06-02T15:17:55.270 回答