use globalcompositeoperations on KineticJS 4.7.2

问题

This was answered at this question using KineticJS 4.6.0 providing this fiddle

But... any idea how to do this on the latest version of kineticjs?

I tried the same fiddle with kineticjs 4.7.2: http://jsfiddle.net/qNtSg/ I just changed drawFunc with the new API

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

compositing is not working

回答1:

The Kinetic.Shape has changed in recent versions.

Now the Shape drawFunc receives a wrapper of the context rather than a canvas.

However, the wrapped context still does not support globalCompositeOperation.

Therefore, you still need to "cheat" by getting the actual html context (instead of the wrapped context).

Here's how to get the actual html context:

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

So here's revised code and a Fiddle: 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
        });

回答2:

very inspirating answer. My requirments were slightly different but I could do it reading this. Leave a commented fiddle in order to contribute). I do here cause I can't comment yet due to reputation under than 50 :)

Thanks to MarkE for the inspiration again, Stupid thing cannot post fiddle without code

Maxi

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

Stupid thing cannot post fiddle without code

http://jsfiddle.net/L7eLR/

来源：https://stackoverflow.com/questions/19562167/use-globalcompositeoperations-on-kineticjs-4-7-2

标签

javascript

html5

canvas

kineticjs

globalCompositeOperation