如何解决Konva加载带有图像和背景视频的舞台
伙计们,所以我有这个konva js应用程序,该应用程序具有您的典型背景视频,如演示程序或接近它的示例。我能够播放视频背景并在其上面添加图像对象。现在,我想要一种将舞台保存为当前状态的方法。因此,我做了state.stage.toJSON()
,并按预期的那样创建了一个序列化的JSON对象。现在这是我挂断的地方。当我像这样 state.stage = Konva.Node.create(data.stage,"container");
加载舞台时,加载了舞台数据(它是正确的大小,依此类推),却没有背景视频,图像或其他任何解决方法?我什至不知道stage.toJSON
是否正确,但关键是我需要保存它,离开页面并在以后的日期重新加载。
state.backgroundVideo = new Konva.Image({
image: state.video,draggable: false
});
state.video.addEventListener("loadedmetadata",function(e) {
state.backgroundVideo.width(state.width);
state.backgroundVideo.height(state.height);
});
state.anim = new Konva.Animation(function() {
// do nothing,animation just need to update the layer
},state.layer);
state.layer.add(state.backgroundVideo);
state.layer.batchDraw();
const canvas = document.getElementsByTagName("canvas")[0];
state.canvas = canvas;
解决方法
node.toJSON()
不会从Konva.Image
属性中序列化图像或视频对象。
要解决此问题,您可以将视频或图像src保存到自定义属性中:
image.setAttr('source',imageURL);
一个简单的字符串将被序列化为JSON。然后,您根据JSON Konva.Node.create(data.stage,"container");
您需要找到此类节点并手动还原图像或视频
// "video-background" is a sample here
// you can define your own selector
const videoNode = stage.findOne('.video-background');
const source = videoNode.getAttr('source');
const video = document.createElement('video');
video.src = source;
videoNode.image(video);
有关更多信息,请在这里查看:
https://konvajs.org/docs/data_and_serialization/Complex_Load.html https://konvajs.org/docs/data_and_serialization/Best_Practices.html
,感谢@lavrton,您的评论确实帮助我弄清楚了。我不是直接加载舞台,而是从舞台保存数据,而是使用数据以完全相同的方式重建舞台。这是我用来保存数据的代码。
这里是我的代码:
const groups = state.stage.find("Group");
const stageData = [];
for (let x = 0; x < groups.length; x++) {
let g = groups[x];
let i = g.findOne("Image").getAttrs();
let group = { x: g.getX(),y: g.getY() };
let image = { x: i.width,y: i.height };
let obj = { image,group,jsonId: g.getAttr("jsonId") };
stageData.push(obj);
}
console.log("stageData",stageData);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。