带有图像和背景视频的 Konva 加载阶段
Konva load stage with images and background video
大家好,我有这个 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);
大家好,我有这个 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);