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

标签： javascript html5 canvas kineticjs globalcompositeoperation

2条回答

冷血范

2楼-- · 2019-08-27 09:54

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
        });

0人赞添加讨论(0) 举报

孤傲高冷的网名

3楼-- · 2019-08-27 10:01

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/

0人赞添加讨论(0) 举报

use globalcompositeoperations on KineticJS 4.7.2

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间