React中的Konva无限网格 [英] Konva infinite grid in React

问题描述

我正在尝试通过包react -konva学习如何使用画布.我找到我需要用javascript写的确切内容，但是我需要使它像react组件并在单击按钮时添加矩形的图像.谁能帮助我重组代码以在响应中显示它....这是我在网上发现的小提琴... 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();
        })

推荐答案

这是我对此的解决方案:

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.

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

这篇关于React中的Konva无限网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！