KineticJS - Шаблоны и заливки на изображениях

Question

У меня есть холст, который я создаю с помощью KineticJS, и я добавляю прозрачные изображения PNG на этот холст. Когда сложены друг на друга, это создает один образ одежды со всеми различными частями.

Затем я хочу позволить пользователю щелкнуть шаблон, а затем изменить определенный фрагмент этого наряда с этим шаблоном. Поэтому мне нужно заполнить непрозрачные части одного из изображений этим шаблоном. Я нашел способ сделать это, не используя KineticJS, и это выглядит примерно так:

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

У меня вопрос, есть ли способ сделать те же шаги, описанные выше с KineticJS?

Кроме того, я сначала попытался сделать это без использования KineticJS, но когда я применил вышеуказанный код к слою, он заполнил все изображения, потому что все они были на одном слое. Поэтому я предполагаю, что мне нужно будет изменить свой код, чтобы использовать несколько слоев или добавить изображения в группы в одном слое. Мое мышление прямо здесь? И какой был бы лучший вариант для того, чего я пытаюсь достичь? Несколько слоев? Или несколько групп на одном слое?

Спасибо за любую помощь, которую может оказать любой.

Answer 1

Если вы хотите сделать пользовательский рисунок, используйте объект формы KineticJS

Это объект KineticJS, который позволяет вам точно контролировать его отрисовку.

Вы создаете свои оверлеи, используя ваш метод композитинга. Затем поместите этот код рисования в функцию и передайте эту функцию drawFunc в Kinetic Shape.

Вот скелет Kinetic.Shape:

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"
});

Вы можете начать с примера здесь: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/