Kineticjs复杂图像剪辑

时间:2014-10-01 10:32:30

标签: javascript html5 kineticjs clip

我试图在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中完成吗?

1 个答案:

答案 0 :(得分:1)

ctx参数不是本机上下文。

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

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