如何在createjs中屏蔽视频

Posted 2023-03-05

【中文标题】如何在createjs中屏蔽视频

【英文标题】：how to mask a video in createjs

【发布时间】：2014-09-20 14:59:39

【问题描述】：

我正在考虑按照这里所做的方式做一些事情：

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

其中 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 中看到它，我没有找到任何示例，尽管我确实注意到位图源可以是视频。 http://www.createjs.com/Docs/EaselJS/classes/Bitmap.html

【参考方案1】：

您可以将容器移动到您想要的任何位置，并且 将包含的图像偏移到您想要的位置。可以完成 通过将要屏蔽的图像添加到容器中。

请参阅this 了解更多信息。我认为这就是您想要的

【讨论】：

该示例没有使用视频作为源吗？我正在尝试沿着这些思路，每帧创建一个新的位图，添加到舞台，屏蔽和删除旧的。不确定开销是多少

【参考方案2】：

您可以将视频用作位图的来源。然后，您可以屏蔽位图。每当更新舞台时，Bitmap 都会对源执行 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);

【讨论】：

所以位图会在stage.update()上自动更新？我以为我需要手动执行此操作，我已经让它在每个刻度上创建一个新的位图

当舞台更新时，位图将源重绘到画布上。如果源更改，那么它将显示在画布上。请注意，如果您缓存它，则它不会更新。您不必每次都创建新的位图。