2014-10-01 53 views
0

我试图在KineticJS中模拟此other's Stackoverflow canvas clipping function与额外功能的可拖动图像,但我无法完成它。Kineticjs复杂图像剪辑

小提琴:http://jsfiddle.net/dekaa/6L1wxt1g/

shape = new Kinetic.Shape({ 
    sceneFunc:function(ctx){ 
     ctx.drawImage(clipping_mask,0,0); 
     ctx.globalCompositeOperation = "source-in"; 
     ctx.drawImage(main_image,0,0); 
    }, 
    draggable:true 
}); 

尽量选用sceneFunc功能,当我使用它的拖拽功能不能正常工作。所以问题是可以在KineticJS中完成吗?

回答

1

ctx参数不是原生上下文。

ctx.drawImage(clipping_mask,0,0); 
    ctx.setAttr('globalCompositeOperation',"source-in"); 
    ctx.drawImage(main_image,0,0); 

http://jsfiddle.net/6L1wxt1g/1/

+0

啊,谢谢你,我忘了这一点。 globalCompositeOperation现在可用,但可拖动的仍然不起作用。 – deka 2014-10-01 12:47:26

+0

您需要定义'hitFunc' http://jsfiddle.net/6L1wxt1g/2/ – lavrton 2014-10-01 13:07:51

+0

非常感谢您的回答。现在非常有意义。 – deka 2014-10-01 15:39:55