Javascript 在KineticJS 4.7.2上使用GlobalComposite操作_Javascript_Html_Canvas_Kineticjs_Globalcompositeoperation

Javascript 在KineticJS 4.7.2上使用GlobalComposite操作

javascript html canvas

Javascript 在KineticJS 4.7.2上使用GlobalComposite操作,javascript,html,canvas,kineticjs,globalcompositeoperation,Javascript,Html,Canvas,Kineticjs,Globalcompositeoperation,这在使用KineticJS 4.6.0提供此功能时得到了回答但是。。。你知道如何在最新版本的kineticjs上做到这一点吗我用kineticjs 4.7.2做了同样的尝试：我刚刚用新的API更改了drawFunc drawFunc: function (context) { ... context.fillStrokeShape(this); } 合成不起作用在最新版本中，动能形状发生了变化。现在Shape drawFunc接收上下文的包装，而不是画布但是，包装的

这在使用KineticJS 4.6.0提供此功能时得到了回答

但是。。。你知道如何在最新版本的kineticjs上做到这一点吗

我用kineticjs 4.7.2做了同样的尝试：我刚刚用新的API更改了drawFunc

drawFunc: function (context) {
    ... 
    context.fillStrokeShape(this);
}

合成不起作用

在最新版本中，动能形状发生了变化。

现在Shape drawFunc接收上下文的包装，而不是画布

但是，包装的上下文仍然不支持

globalCompositeOperation

因此，您仍然需要通过获取实际的html上下文（而不是包装的上下文）来“欺骗”

以下是如何获取实际的html上下文：

drawFunc: function(context) {
    var ctx=this.getContext()._context;
    ....

下面是修改后的代码和一把小提琴：

非常鼓舞人心的回答。我的要求略有不同，但我可以通过阅读这篇文章来做到。留下一把带注释的小提琴以便贡献）。我之所以这么做是因为我还不能发表评论，因为我的声誉低于50:）

再次感谢马克的灵感，愚蠢的东西没有代码就不能发布小提琴

马克西


身体{
利润率：20px；
填充：20px；
}

愚蠢的东西没有代码就不能发布小提琴

        var reveal = new Kinetic.Shape({
          drawFunc: function(context) {
            var ctx=this.getContext()._context;
            ctx.save();
            ctx.beginPath();
            ctx.globalCompositeOperation="destination-out";
            ctx.arc(120,120,75,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
          },
          dragBoundFunc: function(pos) { return(pos); },
          fill: '#00D2FF',
          stroke: 'black',
          strokeWidth:4,
          draggable:true
        });

<html>
  <head>
    <style>
      body {
        margin: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
 </body>
</html>