将clipPath附加到对象后,视频无法正确播放。
仅在调整对象大小时,视频才会更新帧。
var canvas = new fabric.Canvas('canvas');
var videoEl = document.getElementById('video');
var clipText = new fabric.Text('My Custom Text', {
left: 'center',
top: 'center',
fontSize: 40,
});
var video = new fabric.Image(videoEl, {
left: 10,
top: 10,
angle: 0,
originX: 0,
originY: 0,
objectCaching: false,
clipPath: clipText,
backgroundColor: '#ff0000'
});
canvas.add(video);
video.getElement().play();
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
看起来像fabric.js在Image对象具有clipPath时很大程度上依赖于缓存。
在渲染调用期间,由于存在this.needsItsOwnCache()
,因此它会检查返回true
的this.clipPath
。然后,它调用this.renderCache()
,仅当this.isCacheDirty()
返回true
时才更新缓存的画布。
为了使其返回true,您可以利用对象的statefullCache
和statefullCache
将自定义cacheProperties
属性设置为视频元素的cacheProperties
的值。然后,只需确保在每个动画帧上更新videoTime
。
currentTime
videoTime
const canvas = new fabric.Canvas("c"); const clipText = new fabric.Text("My Custom Text", { left: "center", top: "center", fontSize: 36 }); const videoEl = document.querySelector("#video"); const video = new fabric.Image(videoEl, { left: 10, top: 10, angle: 0, originX: 0, originY: 0, objectCaching: true, statefullCache: true, cacheProperties: ['videoTime'], clipPath: clipText, backgroundColor: "#ff0000" }); canvas.add(video); video.getElement().play(); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); video.videoTime = videoEl.currentTime; fabric.util.requestAnimFrame(render); }); document.querySelector("#button").onclick = () => { video.clipPath = video.clipPath == null ? clipText : null; };