KineticJS, сохраняя данные слоя на этапе перерисовки

Question

У меня есть холст с несколькими слоями. Один слой предназначен для рисования, а у других есть инструменты для него. Я могу нажать на инструмент и применить его к основному слою. Пока что он работает нормально, но теперь я хочу добавить функциональность переразмера. Если размер окна изменится, я просто перерисую сцену {, вызвав функцию init}, и она будет нарисована с помощью пропорций экрана, которые не являются проблемой но я не могу сохранить основной слой. Я пытался использовать функцию jSON, задавался вопросом, получить данные слоя в переменной и перерисовать сцену, а затем с некоторой логикой перерисовать слой с данными JSON с некоторыми изменениями в измерениях, но я не могу загрузить слой с данными JSON ,

Это мой Главный код Layer:

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, 

     }); 

Может кто-нибудь, пожалуйста, помогите мне в получении это сделано?

С уважением Junaid

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