javascript - React 中的 Konva 无限网格

Question

我正在尝试学习如何通过包react-konva使用canvas。我找到了我需要在 javascript 中编写的确切内容，但我需要像 react 组件一样，并在单击按钮时添加矩形的图像。谁能帮我重新组织代码以在 react 中显示它......这是我在网上找到的 fiddle ...... 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();
        })

Answer 1

这是我的解决方案:

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

你只需要以同样的方式生成节点即可。

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