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

Posted 2023-03-25

技术标签:

【中文标题】画布无限滚动映射对象位置【英文标题】：Canvas Infinite Scroll mapping object location 【发布时间】：2019-05-20 06:05:44 【问题描述】：

试图让无限循环滚动在 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();
    )

https://jsfiddle.net/kiksy/jqo2h3dx/2/

【问题讨论】：

你在制造无限滚动的幻觉。您需要world 和camera 才能使其工作。正确知道您正在协调显示的东西取决于canvas 的大小，所以外面的任何东西都不起作用。在这种情况下使用其他东西比使用 KonvaJS 更容易。 【参考方案1】：

解释：

问题在于 i 的计算。需要基于indexX和indexY的值

类似这样的：

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

观察你的 blocks 数组时，只有一个有标题，它位于2 的索引处，它（取决于你的观点）对应于绿色。

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

为什么是* 2？它只是硬编码，但对应于内部网格数组长度为 2。

(Ex: grid[0].length)

完整解决方案：

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;



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


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

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

      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);

      
    
  



checkShapes();
layer.draw();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.min.js"></script>
<div id="container"></div>

带有标题的红色和蓝色的完整解决方案：

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: "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: "",
    text: ""
  ,
  
    w: 300,
    h: 300,
    background: "white",
    image: "/img/test.png",
    fullImage: true,
    title: "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;



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


      const indexX = ((x / WIDTH) + grid.length * WIDTH) % grid.length;
      const indexY = ((y / HEIGHT) + grid[0].length * HEIGHT) % grid[0].length;
      //maps from 0 to 3
      const i = indexX * 2 + indexY;

      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);

      
    
  



checkShapes();
layer.draw();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.min.js"></script>
<div id="container"></div>

镜像问题解决方案：

这是由于以下计算直接导致的：

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

并解决了：

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

当您计算颜色时，您基于您的网格数组：

  ['red', 'yellow', 'pink' ]
  ['green', 'blue' , 'gray' ]
  ['orange', 'blue' , 'black']

当您在逻辑上向下或向右（正值）前进时没有问题，当您向上或向左（负值）移动时一切都变得疯狂，因为您使用 Math.abs 计算 indexX 和 indexY。

例如，位于 [-1,-1] 的红色框与网格中的任何颜色都不匹配。根据您的公式，它只会选择“蓝色”，而实际上它应该是“黑色”。

【讨论】：

哇，谢谢！这回答了我的问题。我在这里对其进行了扩展：jsfiddle.net/kiksy/hpduwr09/3 您可以看到 2 个标题块在向下或向左拖动时保持正确的顺序，但向上或向右拖动意味着它们乱序。我假设是因为它需要反向绘制负 x/y 阻力？我想我理解了那部分，问题是向上或向左拖动的重绘（所以减号）似乎以错误的顺序重绘，即使更新 * 2 .see jsfiddle.net/kiksy/hpduwr09/10 .请注意，4 个编号的块出现故障。感谢您对此的帮助。它让我的大脑融化了这么久。啊，是的！我一直在尝试根据拖动方向调整这些值！您的解决方案要简单得多！非常感谢。嗨！框之间的边距是否可以有不同的尺寸？

以上是关于画布无限滚动映射对象位置的主要内容，如果未能解决你的问题，请参考以下文章

在无限滚动中延迟加载时锁定滚动位置（向上滚动）

无限滚动返回到相同的位置

myBatis无限滚动的偏移位置设置问题

连续循环页面（非无限滚动）

使用 Angular 和 RxJS 实现的无限滚动加载

列表无限滚动（虚拟列表）