在KineticJS 4.7.2上使用全局编译操作 [英] use globalcompositeoperations on KineticJS 4.7.2

问题描述

这是在使用KineticJS 4.6.0的此问题回答的，提供此 fiddle

但是...任何想法如何在最新版本的kineticjs？

我试过与kineticjs 4.7.2相同的小提琴： http://jsfiddle.net/qNtSg/
我刚刚用新的API改变了drawFunc

  drawFunc：function（context）{
 ... 
 context.fillStrokeShape（this）; 
} 
  

合成不起作用

解决方案

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

然而，被包装的上下文仍然不支持 globalCompositeOperation 。 / p>

因此，您仍然需要通过获取实际的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 
} 
  

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

解决方案

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

这篇关于在KineticJS 4.7.2上使用全局编译操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！