0

使用 KineticJS 4.6.0在这个问题上回答了这个问题，提供了这个小提琴

但是...知道如何在最新版本的 kineticjs 上执行此操作吗？

我用 kineticjs 4.7.2 尝试了同样的小提琴：http: //jsfiddle.net/qNtSg/ 我只是用新的 API 改变了 drawFunc

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

合成不起作用

4

2 回答 2

1

Kinetic.Shape 在最近的版本中发生了变化。

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

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

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

以下是获取实际 html 上下文的方法：

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

所以这里是修改后的代码和小提琴：http: //jsfiddle.net/m1erickson/h3DGB/

        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
        });
于 2013-10-24T15:37:24.673 回答
0

非常鼓舞人心的答案。我的要求略有不同，但我可以通过阅读来做到这一点。留下评论的小提琴以便做出贡献）。我在这里是因为声誉低于 50 岁，所以我还不能发表评论 :)

再次感谢 MarkE 的启发，愚蠢的东西不能在没有代码的情况下发布小提琴

马克西

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

愚蠢的东西不能在没有代码的情况下发布小提琴

http://jsfiddle.net/L7eLR/

于 2014-03-15T13:24:50.780 回答