React 中的 Konva 无限网格

2022-01-18 00:00:00 reactjs grid javascript konvajs react-konva

我，我正在尝试通过一个包 react -konva 来学习如何使用画布.我找到了我需要用 javascript 编写的确切内容，但我需要让它像反应组件一样，并在按钮单击矩形的地方添加图像.谁能帮我重新组织代码以在反应中显示它......这是我在网上找到的小提琴......https://jsfiddle.net/kiksy/jqo2h3dx/2/

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

推荐答案

这是我的解决方案:

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.

演示:https://codesandbox.io/s/react-konva-无限网格kkndq

相关文章