Comment masquer une vidéo dans CreateJs

Question

Je cherchais à faire quelque chose dans le sens de ce qui est fait ici:

http://vige.com/extend/masking-video-Tags-with-html5-canvas

où le globalcossibilité est utilisé pour définir la zone masquée.

function drawMaskedVideo() {
    ctx.save();

    // Draw the video feed
    ctx.drawImage(video, 0, 0);

    // Set the composite operation, which is responsible for masking
    // see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
    ctx.globalCompositeOperation = 'destination-in';

    // Apply the mask
    ctx.drawImage(mask, 0, 0);

    ctx.restore();
}

requestAnimationFrame(function loop() {
    requestAnimationFrame(loop.bind(this));
    drawMaskedVideo();
});

Cependant, je ne suis pas sûr à quel point cela s'intègre-t-il à CreateJS, a-t-il déjà été vu dans CreateJS, je n'ai trouvé aucun exemples, même si j'ai remarqué qu'une source bitmap peut être une vidéo. http://www.createjs.com/docs/easeljs/classes/bitmap.html

Answer 1

Vous pouvez utiliser une vidéo comme source pour un bitmap.Vous pouvez ensuite masquer le bitmap.Le bitmap fait juste un dessin () avec la source chaque fois que la scène est mise à jour.Notez que le masque s'orientera avec le bitmap, de sorte que vous n'avez pas besoin de déplacer manuellement le masque, à moins que vous ne souhaitiez le changer relatif à la vidéo.

var bmp = new createjs.Bitmap(videoHTMLTag);
bmp.mask = new createjs.Shape(new createjs.Graphics().beginFill("#000").drawRect(0,0,100,100));

Assurez-vous de mettre à jour la scène constamment, ou la vidéo ne changera pas de la première fois qu'elle est rendue.

createjs.Ticker.on("tick", stage);

Answer 2

Vous pouvez déplacer le conteneur sur n'importe quelle position que vous souhaitez et Offfset l'image contenue dans la position que vous voulez.Le peut être fait En ajoutant l'image que vous souhaitez masquer sur le conteneur.

voir Ceci une pour plus d'informations.IC'est ce que tu voulais