KonvaJS / HTML5 Canvas бесконечные циклы прокрутки - нельзя клонировать сцену и добавить к началу - PullRequest
Новая
       13

KonvaJS / HTML5 Canvas бесконечные циклы прокрутки - нельзя клонировать сцену и добавить к началу

0 голосов
/ 03 декабря 2018

Я пытаюсь создать холст KonvaJS с несколькими элементами (скажем, 200), что больше, чем уместится в окне просмотра.Прокрутка вокруг области просмотра работает нормально, но я хочу, чтобы весь холст казался бесконечным.Аналогично этому: Пример JS Fiddle здесь Так что, когда вы прокрутите вверх, вы увидите нижнее содержимое.Мой план состоит в том, чтобы определить, находится ли браузер рядом с верхом или низом, и клонировать сцену, а затем добавить ее в верх или низ исходной сцены.Как только это произойдет снова, уничтожьте исходную сцену и повторите.

    window.onscroll = function(ev)
    {
        var B= document.body; 
        var D= document.documentElement; 
        D= (D.clientHeight)? D: B;

        if (D.scrollTop == 0)
        {
            console.log("scrolled top");
            var cloned_stage = stage.clone();

            cloned_stage.setContainer("container2");

            cloned_stage.draw();


        }

        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            console.log("scrolled bottom");
        }
    };

JSFiddle

Это, похоже, ничего не делает.Я тоже пытался поиграть со смещением Y, но не повезло.Это лучший подход?

1 Ответ

0 голосов
/ 04 декабря 2018

В Konva есть ошибка в стадии клонирования.Клонированная сцена неправильно подключена к DOM.В качестве обходного пути вы можете сериализовать / десериализовать его. 

var JSON = stage.toJSON();

cloned_stage= Konva.Node.create(JSON, "container2")

Демо https://jsfiddle.net/gsaorb82/2/

...