Konva infinite grid in React

问题

i,m trying to learn how to use canvas via a package react -konva. I fount the exact thing what i nead write in javascript but i nead to have it like react component and add images where rectangles are on button click. Can anyone help me to reorganize the code to display it in react.... This is the fiddle that i found on the web...https://jsfiddle.net/kiksy/jqo2h3dx/2/

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

回答1:

Here is my solution to this:

const WIDTH = 100;
const HEIGHT = 100;

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

const App = () => {
  const [stagePos, setStagePos] = React.useState({ x: 0, y: 0 });
  const startX = Math.floor((-stagePos.x - window.innerWidth) / WIDTH) * WIDTH;
  const endX =
    Math.floor((-stagePos.x + window.innerWidth * 2) / WIDTH) * WIDTH;

  const startY =
    Math.floor((-stagePos.y - window.innerHeight) / HEIGHT) * HEIGHT;
  const endY =
    Math.floor((-stagePos.y + window.innerHeight * 2) / HEIGHT) * HEIGHT;

  const gridComponents = [];
  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;

      gridComponents.push(
        <Rect
          x={x}
          y={y}
          width={WIDTH}
          height={HEIGHT}
          fill={grid[indexX][indexY]}
          stroke="black"
        />
      );
    }
  }
  return (
    <Stage
      x={stagePos.x}
      y={stagePos.y}
      width={window.innerWidth}
      height={window.innerHeight}
      draggable
      onDragEnd={e => {
        setStagePos(e.currentTarget.position());
      }}
    >
      <Layer>{gridComponents}</Layer>
    </Stage>
  );
};

You just need to generate nodes in the same way.

Demo: https://codesandbox.io/s/react-konva-infinite-grid-kkndq

来源：https://stackoverflow.com/questions/58445131/konva-infinite-grid-in-react