Javascript Kinetic js 5.1 GlobalComposite操作如何

我是个新手。 我正在尝试让一些.globalCompositeOperation在我的项目的两个部分中工作，我已经尝试了几种我可以在这里找到的解决方案，使用“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);

“背景画”是一幅动态图像

不幸的是，我在这里得到的只是在“BackgroundPaint”的顶部设置精灵层动画，但没有应用复合操作：（

对于第二个例子，它实际上非常相似，我只是在舞台上添加了两个层，都有内部形状。我将相同的“场景”应用到顶部的层，然后绘制它们。 仅显示两个图层，不应用合成：(

关于我应该看什么，有什么建议吗？我看到，例如“drawFunc”最近被改成了“sceneFunc”，也许还有其他的东西发生了变化，因为我尝试了在堆栈中找到的几乎所有示例

---

谢谢

KineticJS不支持

GlobalComposite操作

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

解决方案

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

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

... do compositing ...

// this Kinetic.Image will display myOffscreenCanvas

var myCompositedImage = new Kinetic.Image({

    image:myOffscreenCanvas,

    ...

});

---

感谢您的回答，性能方面的一个问题是，我的对象是Kinectic形式的，因此我必须创建一个屏幕外画布，使用“layerAB.getCanvas（）。\u canvas”绘制我的Kinectic对象（drawImage），然后进行globalComposite，然后将最终结果重新绘制回我的图层？是否可以绘制到尚未添加到舞台的图层？我已经尝试过，然后在其他地方绘制该图层的画布，但如果我的“屏幕外”，则不会绘制任何内容画布未添加到舞台。您可以使用

myNode.toImage

将运动节点转换为图像，然后使用

drawImage

在画布上绘制该图像。（与整个层或整个舞台相同）。当从屏幕外画布绘制到Kinetic.Image时，不会对材质性能造成影响。原因是画布保持一个像素阵列，该阵列仅被Blit（批量复制）到任何基于像素的图像（如Kinetic.Image）。至于如何将画布绘制到Kinetic。形状：您可以只绘制图像（offscreenCanvas，x，y）谢谢markE，我现在正在研究这个问题，我想这是缺少的链接：）。我在尝试这个时似乎遇到了一个错误…`var tWidth=brush.getWidth（）；var tHeight=brush.getHeight（）；brush.toImage（{width:tWidth，height:tHeight，x:0，y:0，callback:function（e）{…}`…其抛出：Uncaught TypeError:无法读取null kinetic-v5.1.0.min.js:1419Kinetic.Util.addMethods.drawScene kinetic-v5.1.0.min.js:1419Kinetic.Util.addMethods.toDataURL kinetic-v5.1.0.min.js:685Kinetic.Util.addMethods.toImageOk的属性'\uApplyTransform'，发生这种情况是因为我没有首先将形状添加到舞台上的层。不幸的是，性能相当低，我猜由于等待回调，这基本上就像是两层之间的克隆笔刷，当你用指针移动时，上面的层“被删除”，而你看到下面的层。通过使用原始画布，我得出结论，使用“destination out”是表现最好的选择，但也热衷于其他选择。