createjs에서 비디오를 가리 키는 방법

Question

여기서 수행되는 라인을 따라 뭔가를보고있었습니다.

http://viget.com/extend/masking-video-태그 - 사용 -HTML5-캔버스

GlobalCompositeOperation이 마스크 된 영역을 설정하는 데 사용되는 곳입니다.

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

.

그러나 이것은 이것이 CreateJs와 얼마나 잘 통합 될지 모르겠지만, CreateJS에서 수행 한 사람이있는 사람이 있지만 비트 맵 소스가 비디오가 될 수 있음을 알아 냈지만 예제를 찾지 못했습니다. "Nofollow"> http://www.createjs.com/docs/easeljs/classes/bitmap.html.

Answer 1

비디오를 비트 맵의 소스로 사용할 수 있습니다.그런 다음 비트 맵을 마스크 할 수 있습니다.비트 맵은 스테이지가 업데이트 될 때마다 소스가있는 DrawImage ()를 만듭니다.마스크는 비트 맵과 동의 할 것이므로 비디오를 기준으로 변경하지 않으려면 마스크를 수동으로 이동할 필요가 없습니다.

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

.

스테이지를 지속적으로 업데이트하거나 비디오가 처음으로 렌더링되는 경우부터 변경되지 않습니다.

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

.

Answer 2

컨테이너를 원하는 위치에 대해 이동할 수 있습니다. OFFFSET 이미지가 원하는 위치에 포함 된 이미지를 수행 할 수 있습니다. 컨테이너에 가려고 할 이미지를 추가하여

더 많은 정보를위한이 하나는 생각합니다.이것은 당신이 원하는 것입니다