使用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)"
      />

它真的快要出现了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript react-konva reactjs reactjs