KineticJs - 将图像合并到另一个图像上

Question

我想知道Kinetic中是否有某种方法可以将图像与下层的另一个图像合并，根据“裁剪”图像的形状创建一种裁剪效果。

因此，图像必须具有透明背景，这是我的主要困难来源。否则我只会使用一个拖动关闭的面具...我已经制作了一个图表来解释我想要的更好一点。欢迎任何建议。

diagram

我也快速jsfiddle，我希望图片的内容在里面框中显示。我觉得有一个layer是继续这个的方式。

Answer 1

您可以使用屏幕外Canvas元素加上合成来创建剪裁图像以供Kinetic.Image使用。请注意，屏幕外画布可用作Kinetic.Image的图像源。

示例代码和演示：http://jsfiddle.net/m1erickson/ks1xxqfL/

var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
canvas.width=background.width;
canvas.height=background.height;
ctx.drawImage(mask,0,0,mask.width*2.25,mask.height*2.25);
ctx.globalCompositeOperation='source-in';
ctx.drawImage(background,0,0);

var support=new Kinetic.Image({
    draggable:true,
    image:canvas,
});
layer.add(support);
layer.draw();

插图

• 左：背景图片，
• 居中：用作剪贴蒙版的图像
• 右：由面具裁剪的背景（面具按2.25倍缩放）