使用react-konva捕捉网格并进行拖放

如何解决使用react-konva捕捉网格并进行拖放

我正在使用React-Konva创建一个RPG桌上游戏。我做了一个无限的网格，并拖放了一些图像标记。

因此，它的工作正常。但是，在寻找另一个功能时，我发现使用Canvas可以做到这一点，与我的操作几乎相同，但是由于有斑点，形状像磁性一样被吸引到Rect上！

这里有一个例子： Snap with Canvas
Snap with Konva.js

for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid,i * grid,600],{ stroke: '#ccc',selectable: false }));
  canvas.add(new fabric.Line([ 0,600,i * grid],selectable: false }))
} 

有一种方法可以对React-Konva进行处理？我发现与Konva.js类似的东西

已编辑：

我快到了！

const [x,setX] = useState(50)
const [y,setY] = useState(50)

const grid = 70
const gridWidth = 1100

const linesA = []
const linesB = []

  for (let i = 0; i < gridWidth / grid; i++) {
    linesA.push(
      <Line
        strokeWidth={2}
        stroke={'black'}
        points={[i * grid,gridWidth]}
      />
    )

    linesB.push(
      <Line
        strokeWidth={2}
        stroke={'black'}
        points={[0,gridWidth,i * grid]}
      />
    )
  }

  <Layer>
    {linesA}
    {linesB}        
  </Layer>

我用线条制作了网格，现在我对dragEnd事件X，Y有点困惑。

MY RECT

  <Rect
        onDragEnd={e => {
          e.target.to({
            x: Math.round(x / grid) * grid,y: Math.round(y / grid) * grid,})
        }}
        x={x}
        y={y}
        draggable
        width={60}
        height={60}
        fill="rgba(0,1)"
      />

它真的快要出现了。

解决方法

完成！我将发布自己的答案以帮助某人。

const grid = 70
const gridWidth = 1000

const linesA = []
const linesB = []

  for (let i = 0; i < gridWidth / grid; i++) {
    linesA.push(
      <Line
        strokeWidth={2}
        stroke={'black'}
        points={[i * grid,i * grid,gridWidth]}
      />
    )

    linesB.push(
      <Line
        strokeWidth={2}
        stroke={'black'}
        points={[0,gridWidth,i * grid]}
      />
    )
  }

  <Stage
        x={stagePos.x}
        y={stagePos.y}
        width={window.innerWidth}
        height={window.innerHeight}
        draggable
        onDragEnd={e => {
          setStagePos(e.currentTarget.position())
        }}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseMove={handleMouseMove}
        onContextMenu={e => {
          e.evt.preventDefault()
        }}
      >
        {/* <Layer>
          <Image image={map} opacity={1} />
        </Layer> */}

        <Layer>
          {linesA}
          {linesB}
        </Layer>

       <Rect
            onDragEnd={e => {
              e.target.to({
                x: Math.round(e.target.x() / grid) * grid,y: Math.round(e.target.y() / grid) * grid,})
            }}
            x={x}
            y={y}
            draggable
            width={65}
            height={65}
            fill="rgba(0,1)"
          />

 </Stage>

在这里，我做了一个生动的例子！ Snap Grid React-Konva