Kineticjs複雜圖像剪輯

Question

我試圖在KineticJS中模擬此other's Stackoverflow canvas clipping function與額外功能的可拖動圖像，但我無法完成它。

小提琴：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中完成嗎？

Answer 1

ctx參數不是原生上下文。

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

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