Question

我是Kinetic JS的新手。我试图让一些.globalCompositeOperation在我所拥有的项目的两个部分工作，我尝试了几个我可以在这里找到的解决方案，使用＆＃39; drawFunc＆＃39;和＆＃39; sceneFunc＆＃39;等。 ..但到目前为止没有运气。

该项目的一部分我试图获得目的地＆＃39;处理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);

＆＃34; backgroundPainted＆＃34;是一个Kinetic.Image

不幸的是，我在这里得到的是sprite图层在＆＃39; backgroundPainted＆＃39;之上进行动画处理，但没有应用复合操作：（。

对于我的第二个实例，它实际上非常相似，我只有2层，两个都有形状，添加到舞台。我应用相同的场景功能＆＃39;到顶部的图层，然后绘制它们。这些图层都显示，没有应用任何组合。：（

关于我应该注意什么的任何指示？我看到了例如＆＃39; drawFunc＆＃39;已被更改为＆＃39; sceneFunc＆＃39;最近，也许其他一些事情发生了变化，因为我已经尝试了几乎所有我在堆栈上可以找到的例子。

由于

Answer 1

KineticJS不支持globalCompositeOperation。

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

解决方法

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

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

... do compositing ...

// this Kinetic.Image will display myOffscreenCanvas

var myCompositedImage = new Kinetic.Image({

    image:myOffscreenCanvas,

    ...

});

Kinetic js 5.1 globalCompositeOperation如何

1 个答案: