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

Question

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

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

diagram

我还快速做了一个jsfiddle ，我希望图像的内容显示在框中内部。我觉得一层层是继续这一层的方法。

Answer 1

您可以使用屏幕外 Canvas 元素加上合成来创建剪切图像以供 Kinetic.Image 使用。请注意，屏幕外 Canvas 可用作 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 倍)