FabricJS在视频上具有clipPath问题

问题描述 投票:0回答:1

将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);
});
fabricjs clip-path
1个回答
0
投票

看起来像fabric.js在Image对象具有clipPath时很大程度上依赖于缓存。

在渲染调用期间,由于存在this.needsItsOwnCache(),因此它会检查返回truethis.clipPath。然后,它调用this.renderCache(),仅当this.isCacheDirty()返回true时才更新缓存的画布。

为了使其返回true,您可以利用对象的statefullCachestatefullCache将自定义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;
};
© www.soinside.com 2019 - 2024. All rights reserved.