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

Posted 2023-03-25

【中文标题】KonvaJS / HTML5 Canvas 无限滚动循环项目 - 无法克隆舞台并附加到顶部

【英文标题】：KonvaJS / HTML5 Canvas infinite scroll looping items - cannot clone stage and append to top

【发布时间】：2019-05-04 22:23:18

【问题描述】：

我正在尝试创建一个包含许多项目（比如 200 个）的 KonvaJS 画布，这超出了视口的大小。滚动视口效果很好，但我希望整个画布看起来是无限的。与此类似： 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 偏移，但没有运气。这是最好的方法吗？

【参考方案1】：

Konva 在阶段克隆中存在一个错误。克隆阶段未正确附加到 DOM。作为一种解决方法，您可以对其进行序列化/反序列化。

var JSON = stage.toJSON();

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

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