Javascript KineticJS-图像上的图案和填充

我有一个使用KineticJS创建的画布，我正在向该画布添加透明的PNG图像。当堆叠在彼此的顶部时，这将生成一个包含所有不同部分的装备的图像

然后我想做的是允许用户点击一个图案，然后用该图案更改该服装的特定部分。所以我需要用这种图案填充其中一幅图像的不透明部分。我找到了一种不使用KineticJS的方法，它看起来像这样：

ctx.globalCompositeOperation = 'source-in';
var ptrn = ctx.createPattern(fabricA, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 375, 260);

我的问题是，有没有办法用KineticJS完成上述步骤

此外，我确实第一次尝试在不使用KineticJS的情况下执行此操作，但当我将上述代码应用到该层时，它填充了所有图像，因为它们都在同一层上。所以我猜我需要修改代码，要么使用多个层，要么将图像添加到单个层中的组中。我的想法正确吗？对于我想要实现的目标，哪一个是更好的选择？多层？还是在一层上有多个组

---

感谢任何人提供的帮助。

如果您想进行自定义绘图，请使用KineticJS形状对象

这是一个KineticJS对象，可用于精确控制其绘制方式

使用合成方法创建覆盖图。然后将该绘图代码放入一个函数中，并将该函数赋予Dynamic Shape的drawFunc

这是动能的骨架。形状：

var outfit1 = new Kinetic.Shape({
    drawFunc: function(canvas) {

        // you are passed a canvas to draw your custom shape on
        // so new-up a context and get drawing!
        var context = canvas.getContext();

        context.beginPath();

        // Draw stuff--including your composited overlays
        // You can use any canvas.context drawing commands

    },
    id:"myCustomOutfit"
});

您可以从以下示例开始：