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

Question

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

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

举个例子： Snap with Canvas
Snap with Konva.js

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

  <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

大功告成！我会 post 我自己的答案来帮助别人。

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

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

Snap grid, drag and drop with react-konva

javascript

canvas

reactjs

react-konva