KineticJS，在舞台重绘时保留图层数据答案

【问题标题】：KineticJS, preserving layer data on stage redrawKineticJS，在舞台重绘时保留图层数据
【发布时间】：2013-09-10 01:46:43
【问题描述】：

我有一个有多个图层的画布。一层用于绘图，其他层有工具。我可以单击一个工具并将其应用到主层。到目前为止它工作正常，但现在我想添加重新调整大小的功能。如果窗口重新调整大小，我将简单地重绘舞台{通过调用 init 函数}，它会以屏幕比例绘制，这不是问题但是，我无法保留主层。我尝试使用 toJSON 函数，想在变量中获取图层数据并重绘舞台，然后使用一些逻辑重绘带有 JSON 数据的图层，并对尺寸进行了一些修改，但无法加载带有 JSON 数据的图层.

这是我的主层代码：

var stage = new Kinetic.Stage({
    container: "container",
    width: document.getElementById('container').offsetWidth,
    //width: 1000,
    height: document.getElementById('container').offsetHeight
});

var canvasContainer = new Kinetic.Layer({
            x: stage.getX(),
            y: stage.getY(),
            width: ((stage.getWidth() / 100 ) * 30), //stage.getWidth() > 600 ? ((stage.getWidth() / 100 ) * 30) : 300,
            height: stage.getHeight(),
            draggable: false,

        });

谁能帮我完成它？

问候朱奈德

【问题讨论】：

您使用 toJSON 和重新创建的方法应该可行，我过去曾使用过。因此，请尝试输入该代码并突出显示尝试重新创建时发生的特定问题。小提琴是最好的！

标签： canvas html5-canvas kineticjs

【解决方案1】：

您当然可以使用toJSON 方法将Kinetic.Shape 保存在容器内（在本例中为canvasContainer 层）。要对其进行测试，请查看执行此操作时的输出：

console.log(canvasContainer.toJSON());

您可以像这样从 json 字符串重新创建图层：

var json = canvasContainer.toJSON();
canvasContainer = Kinetic.Node.create(json, 'container');

但是，当你所做的只是调整它的大小时，为什么你需要重绘/重新初始化舞台？相反，我会在舞台上使用setSize 函数：

//After Code to resize window or #container
var newWidth = document.getElementById('container').offsetWidth;
var newHeight = document.getElementById('container').offsetHeight;
stage.setSize(newWidth, new Height);
stage.draw();

http://kineticjs.com/docs/Kinetic.Stage.html#setSize

【讨论】：