Question

我有一个包含多个图层的画布。一层用于绘图，另一层用于它。我可以单击一个工具并将其应用到主层。到目前为止它的工作正常，但现在我想添加重新调整大小的功能..如果窗口重新调整大小，我将简单地重绘舞台{通过调用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,

        });

有人可以帮助我完成它吗？

此致朱奈德

Answer 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

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

1 个答案: