0

私はKinetic JSにかなり慣れていません。私が持っているプロジェクトの 2 つの部分でいくつかの .globalCompositeOperation を動作させようとしています。「drawFunc」や「sceneFunc」などを使用して、ここで見つけることができるいくつかの解決策を試しましたが、これまでのところ運がありません。

プロジェクトの一部 'destination-out' を 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番目のインスタンスでは、実際には非常に似ています.2つのレイヤーがあり、両方とも内部に形状があり、ステージに追加されています. 上のレイヤーに同じ「sceneFunc」を適用してから描画します。レイヤーは両方とも表示され、コンポジションは適用されません。:(

私が何を見なければならないかについての指針はありますか？たとえば、'drawFunc' が最近 'sceneFunc' に変更されたことがわかります。スタック上でここで見つけることができるほとんどすべての例を試したので、他の何かが変更された可能性があります。

ありがとう

4

1 に答える 1

0

KineticJS はサポートしていませんglobalCompositeOperation。

KineticJS は html5 キャンバス コンテキストのラッパーを提供しますが、そのラッパーは context.globalCompositeOperation プロパティを含まないコンテキストのサブセットです。

回避策

canvas 要素を (ページに追加せずに) 作成できます。そのオフスクリーン キャンバスで合成を行います。そのキャンバスを KineticJS 内に表示するには、オフスクリーン キャンバスを指す image プロパティを使用して Kinetic.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 に答える