javascript - Kineticjs 复杂图像裁剪

Question

我试图模仿这个 other's Stackoverflow canvas clipping function在 KineticJS 中具有可拖动图像的附加功能，但我无法完成它。

fiddle :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 参数不是 native 上下文。

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

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