Kineticjs форма клипа с помощью изображения маски

Question

У меня есть изображение маски, как этот

Как можно скрыть элементы, сделанные по этой маске, как в Photoshop (темные области невидимые, прозрачные области показаны).

Можно сделать это в сыром холст с помощью установки globalCompositeOperation = 'destination-over', но я хочу его в Kineticjs

Answer 1

Вы можете сделать что-то вроде этого:

var shape = new Kinetic.Shape({ 
    drawFunc: function(context) { 
    context.beginPath(); 
    context.rect(0, 0, image.width, image.height) 
    context.closePath(); 
    context.fillStrokeShape(this); 

    context.setAttr('globalCompositeOperation', 'destination-out'); 
    context.drawImage(image, 0, 0); 
     context.setAttr('globalCompositeOperation', 'source-over');   
    }, 
    fill: '#00D2FF', 
}); 

Демо: http://jsbin.com/nebuvi/1/edit?html,js,output

Answer 2

Как мне известно, вы можете попытаться с помощью непрозрачности: 0. для значения изображения. или создать прямоугольник, перекрывающий прямоугольник над вашим изображением.