0

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

        });

谁能帮我完成它？

问候朱奈德

4

1 回答 1

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

于 2013-09-09T17:46:43.397 回答