Переключение между слоями в кинетическом

Я пытаюсь рассматривать слои как страницы - то есть я рисую на одной странице, затем поворачиваю страницу и рисую на другую, каждый раз сохраняя предыдущую страницу, если пользователь вернется к ней.

На мой взгляд, это означает:

  • Create current_layer global pointer.
  • Each time newPage() is called, store the old layer in an array, and overwrite the pointer

    layer_array.push(current_layer); //store old layer

    current_layer = new Kinetic.Layer(); //overwrite with a new

  • New objects are then added to the current_layer which binds them to the layer, whether they are drawn or not. (e.g. current_layer.add(myCircle) )

  • Retrieving a page is simply updating the pointer to the requesting layer in the array, and redrawing the page. All the child nodes attached to the layer will also be drawn too

    current_layer = layer_array[num-1]; //num is Page 2 e.g

    current_layer.draw()

Однако ничего не происходит! Я могу создавать новые страницы и хранить их соответственно - но я не могу их снова вернуть ...

Вот мой полный код (у моего браузера возникают проблемы с использованием jsfiddle):

<html>

  <head>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js"></script>
    <script>
      //Global
      var stage; //canvas
      var layer_array = [];
      var current_page; //pointer to current layer

      window.onload = function() {
        stage = new Kinetic.Stage({
          container: 'container',
          width: 400,
          height: 400
        });

        //Add initial page to stage to draw on
        newPage()

      };

      //--- Functions ----//

        function newPage(){
            if(!current_page){
                console.log("current page undefined");

            } else {
                layer_array.push(current_page);
//              stage.remove(current_page); 

                //Nope, not working.
                stage.removeChildren();        
                //Works, but I think it unbinds all objects
               //from their specific layers...
//              stage.draw()

                console.log("Stored layer and removed it from stage");
            }
            current_page = new Kinetic.Layer();
            console.log("Currently on page:"+(layer_array.length+1));

            stage.add(current_page);
            stage.draw();

        }


        function gotoPage(num){
            stage.removeChildren()
            stage.draw()

            num = num-1;
            if(num >= 0) {
                current_page = layer_array[num];
                console.log("Now on page"+(num+1));

                stage.add(current_page);
                stage.draw();
            }

        }


        function addCircletoCurrentPage() 
        {
            var rand = Math.floor(3+(Math.random()*10));

            var obj = new Kinetic.Circle({
                x: rand*16, y: rand*16,
                radius: rand,
                fill: 'red'
            })

            var imagelayer = current_page;
            imagelayer.add(obj);
            imagelayer.draw();
        }
    </script>
  </head>

  <body>
    <div id="container"></div>
    <button onclick="addCircletoCurrentPage()" >click</button>
    <button onclick="newPage()" >new</button>
    <button onclick="gotoPage(1)" >page1</button>
    <button onclick="gotoPage(2)" >page2</button>
    <button onclick="gotoPage(3)" >page3</button>

  </body>

</html>
2
nl ja de

2 ответы

This was a fun problem. I think this fixes your troubles: http://jsfiddle.net/LRNHk/3/

В принципе, вы не должны удалять() или removeChildren (), поскольку вы рискуете удалить их.

Вместо этого вы должны использовать:

   layer.hide();  and  layer.show();

таким образом, вы держите все равным, и вы быстро достигаете производительности. Таким образом, ваша функция страницы должна быть такой:

    function gotoPage(num){
       for(var i=0; i

Я также изменил ваши другие функции, которые вы можете увидеть в jsfiddle.

3
добавлено
Вы, сэр, ниндзя. Большое спасибо! Позвольте мне проверить это, прежде чем я поклею вас
добавлено автор tetris11, источник
Да, проверено - я видел некоторые из ваших вопросов на KineticJS, вы должны быть очень кстати с этим
добавлено автор tetris11, источник
да, эта часть будет другой головной болью хе-хе ...
добавлено автор tetris11, источник
также просто небольшая проблема с вашим методом gotoPage (num) , где вы не обновили указатель current_page , чтобы он соответствовал новому показанному уровню. Небольшая проблема, которую я знаю, но для будущих пользователей
добавлено автор tetris11, источник
Работая с ним некоторое время, он идеально подходит для холста.
добавлено автор SoluableNonagon, источник
Кроме того, вы заметите, что jsfiddle не полностью решает проблему, поскольку добавление элементов и перелистывание страниц могут не дать вам идеальных результатов. Вы должны возиться с логикой добавления элементов к определенному слою.
добавлено автор SoluableNonagon, источник

Хорошо, я изменил свой подход и вместо того, чтобы менять слои (100 раз проще и имеет больше смысла), я вместо этого предпочел сериализацию всего этапа и его загрузку.

Это работает, но на самом деле это не должно быть так, черт возьми

  //Global
  var stage; //canvas
  var layer_array = [];
  var current_page; //pointer to current layer
  var page_num = 0;

  window.onload = function() {
    stage = new Kinetic.Stage({
      container: 'container',
      width: 400,
      height: 400
    });

    //Add initial page to stage to draw on
    newPage()

  };

  //--- Functions ----//

    function newPage(){
        if(!current_page){
            console.log("current page undefined");

        } else {
            savePage(page_num)
            stage.removeChildren()

            console.log("Stored layer and removed it from stage");
        }
        current_page = new Kinetic.Layer();
        console.log("Currently on page:"+(layer_array.length+1));

        stage.add(current_page);
        stage.draw();

        page_num ++;

    }

    function savePage(num){
        if( (num-1) >=0){
            var store = stage.toJSON();
            layer_array[num-1] = store;
            console.log("Stored page:"+num)
        }
    }

    function gotoPage(num){
        savePage(page_num);

        stage.removeChildren()

        if(num-1 >= 0) {
            var load = layer_array[num-1];
            document.getElementById('container').innerHTML = ""; //blank
            stage = Kinetic.Node.create(load, 'container');

            var images = stage.get(".image");

            for(i=0;i
1
добавлено
Согласен, слишком kludgy - ваш метод идеально
добавлено автор tetris11, источник
Не нужно это делать. используйте слои .hide() и .show ().
добавлено автор SoluableNonagon, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing