KonvaJS / HTML5 Canvas 无限滚动循环项目 - 无法克隆阶段并附加到顶部

Question

我正在尝试创建一个包含多个项目（比如 200）的 KonvaJS canvas，这超出了视口中的容量。在视口中滚动效果很好，但我希望整个 canvas 看起来是无限的。与此类似： JS Fiddle example here 因此，当您滚动到顶部时，您会看到底部的内容。我的计划是检测浏览器何时接近顶部或底部并克隆舞台，然后将其附加到原始舞台的顶部或底部。一旦再次发生这种情况，则破坏原始阶段并重复。

    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 偏移但没有运气。这是最好的方法吗？

Answer 1

阶段克隆中的 Konva 存在错误。克隆阶段未正确附加到 DOM。作为解决方法，您可以 serialize/deserialize 它。

var JSON = stage.toJSON();

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

演示 https://jsfiddle.net/gsaorb82/2/

KonvaJS / HTML5 Canvas 无限滚动循环项目 - 无法克隆阶段并附加到顶部

KonvaJS / HTML5 Canvas infinite scroll looping items - cannot clone stage and append to top

html

javascript

canvas

html5-canvas

konvajs