使用react-konva 捕捉网格、拖放

Question

我正在使用 React-Konva 创建一个 RPG 桌面游戏。我通过拖放制作了无限网格和一些图像令牌。

所以，它工作正常。但是，在寻找另一个功能时，我发现使用 Canvas 实现了这一点，它几乎与我所做的一样，但是使用 spap，形状会像磁性一样被吸引到 Rect 上！

这里是一个示例： 使用 Canvas 进行 Snap
使用 Konva.js 进行 Snap

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

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

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

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

我的直肠

  <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, 0, 0, 1)"
      />

真的快到了。

Answer 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, 0, i * grid, gridWidth]}
      />
    )

    linesB.push(
      <Line
        strokeWidth={2}
        stroke={'black'}
        points={[0, i * grid, 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, 0, 0, 1)"
          />

 </Stage>

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