Come mascherare un video in Createjs

Question

Stavo cercando di fare qualcosa sulla falsariga di ciò che è fatto qui:

http://viget.com/extend/masking-video-Tag-using-html5-canvas

Dove viene utilizzata la GlobalCompositeration per impostare l'area mascherata.

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

.

Comunque non sono sicuro di quanto sia bene, questo si integrerà con Createjs, qualcuno ha visto che ha fatto a crearejs, non ho trovato alcun esempio, anche se ho notato che una fonte bitmap può essere un video. http://www.createjs.com/docs/easeljs/classes/bitmap.html

Answer 1

È possibile utilizzare un video come fonte per una bitmap.È quindi possibile mascherare la bitmap.La bitmap fa solo un drawimage () con la fonte ogni volta che il palcoscenico viene aggiornato.Si noti che la maschera si ormeggia con la bitmap, quindi non è necessario spostare manualmente la maschera, a meno che non si desideri cambiarlo rispetto al video.

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

.

Assicurati di aggiornare costantemente la fase o il video non cambierà dalla prima volta che viene reso.

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

.

Answer 2

.

Puoi spostare il contenitore per qualsiasi posizione che desideri e offfset l'immagine contenuta nella posizione desiderata. Può essere fatto Aggiungendo l'immagine che si desidera mascherare al contenitore.

Vedi questo uno per maggiori informazioni.Questo è quello che volevi