Javascript 画布无限滚动映射对象位置

试图让无限循环滚动在KonvaJS中工作，所以会有一个由24个项目组成的网格，它会不断地滚动

由于@lavrton，基本网格工作正常，但添加项目意味着它们无法在重新绘制时保持原位。我猜这与：

 fill: grid[indexX][indexY], 

你知道如何将文本映射到块吗

 const stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        draggable: true
    });

    const layer = new Konva.Layer();
    stage.add(layer);


    const WIDTH = 100;
    const HEIGHT = 100;

    const grid = [
        ['red', 'yellow'],
        ['green', 'blue']
    ];

    const blocks = [
        { w: 150, h: 150 , background: "white" , image: "/img/test2.png" , fullImage: false, title: "" , text: "" },
        { w: 150, h: 150 , background: "white" , image: "/img/person-icon.png" ,  fullImage: false ,title: "" , text: "" },
        { w: 150, h: 150 , background: "#575756" , image: "" ,  fullImage: false, title: "Title" , text: "" },
        { w: 300, h: 300 , background: "white" , image: "/img/test.png", fullImage: true, title: "" , text: "" }

    ];

        function checkShapes() {
        const startX = Math.floor((-stage.x() - stage.width()) / WIDTH) * WIDTH;
        const endX = Math.floor((-stage.x() + stage.width() * 2) / WIDTH) * WIDTH;

        const startY = Math.floor((-stage.y() - stage.height()) / HEIGHT) * HEIGHT;
        const endY = Math.floor((-stage.y() + stage.height() * 2) / HEIGHT) * HEIGHT;



        var i = 0;
        for(var x = startX; x < endX; x += WIDTH) {
            for(var y = startY; y < endY; y += HEIGHT) {

                if(i === 4)
                {
                    i = 0;
                }

                const indexX = Math.abs(x / WIDTH) % grid.length;
                const indexY = Math.abs(y / HEIGHT) % grid[0].length;

                layer.add(new Konva.Rect({
                    x,
                    y,
                    width: WIDTH,
                    height: HEIGHT,
                    fill: grid[indexX][indexY],
                    stroke: 'black',
                    strokeWidth: 4
                }))

                if(blocks[i].title != ""){

                    var complexText = new Konva.Text({
                        x,
                        y,
                        text: "TEST TEXT",
                        fontSize: 14,
                        fontFamily: 'Calibri',
                        fill: 'white',
                        width: WIDTH,
                        height: HEIGHT,
                        verticalAlign: 'middle',
                        align : "center"
                    });

                    layer.add(complexText);

                }



            }
            i++
        }

    }

    checkShapes();
    layer.draw();

    stage.on('dragend', () => {
        layer.destroyChildren();
        checkShapes();
        layer.draw();
    })

const stage=新Konva.stage({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight，
德拉格布尔：是的
});
const layer=新的Konva.layer（）；
阶段。添加（层）；
常数宽度=100；
常数高度=100；
常数网格=[
[‘红色’、‘黄色’]，
[‘绿色’、‘蓝色’]
];
常数块=[
{w:150，h:150，背景：“白色”，图像：“/img/test2.png”，完整图像：false，标题：”，文本：“}，
{w:150，h:150，背景：“白色”，图像：“/img/person icon.png”，完整图像：false，标题：”，文本：“}，
{w:150，h:150，背景：#575756，图像：，完整图像：假，标题：“标题”，文本：'}，
{w:300，h:300，背景：“白色”，图像：“/img/test.png”，fullImage:true，标题：”，文本：“}
];
函数checkShapes（）{
const startX=数学地板（（-stage.x（）-stage.width（））/宽度）*宽度；
const endX=数学地板（（-stage.x（）+stage.width（）*2）/宽度）*宽度；
常数startY=数学地板（（-stage.y（）-stage.height（））/高度）*高度；
常数=数学楼层（（-stage.y（）+stage.height（）*2）/高度）*高度；
var i=0；
用于（变量x=startX；x{
层。子层（）；
检查形状（）；
layer.draw（）；
})

说明： 问题是

i

的计算。它需要基于

indexX

和

indexY

大概是这样的：

//maps from 0 to 3
const i = indexX * 2 + indexY;

观察块数组时，只有一个有标题，它位于

2

索引处，该索引（取决于您的透视图）对应绿色

const i = 1 * 2 + 0; //index 2

为什么

*2

？它只是硬编码的，但对应于内部网格数组长度2

(Ex: grid[0].length)

完整解决方案：

const stage=新Konva.stage({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight，
德拉格布尔：是的
});
const layer=新的Konva.layer（）；
阶段。添加（层）；
常数宽度=100；
常数高度=100；
常数网格=[
[‘红色’、‘黄色’]，
[‘绿色’、‘蓝色’]
];
常数块=[{
w:150，
h:150，
背景：“白色”，
图片：“/img/test2.png”，
fullImage:false，
标题：“，
案文：“”
},
{
w:150，
h:150，
背景：“白色”，
图片：“/img/person icon.png”，
fullImage:false，
标题：“，
案文：“”
},
{
w:150，
h:150，
背景：“575756”，
图像：“”，
fullImage:false，
标题：“标题”，
案文：“”
},
{
w:300，
h:300，
背景：“白色”，
图片：“/img/test.png”，
真的，
标题：“，
案文：“”
}
];
函数checkShapes（）{
const startX=数学地板（（-stage.x（）-stage.width（））/宽度）*宽度；
const endX=数学地板（（-stage.x（）+stage.width（）*2）/宽度）*宽度；
常数startY=数学地板（（-stage.y（）-stage.height（））/高度）*高度；
常数=数学楼层（（-stage.y（）+stage.height（）*2）/高度）*高度；
用于（变量x=startX；x{
层。子层（）；
检查形状（）；
layer.draw（）；
})

---

您正在制造无限滚动的幻觉。你需要

world

和

camera

才能让它工作。好的，我知道你在协调中展示的东西取决于

画布的大小