React-konva - 使用鼠标单击用线连接圆答案

【问题标题】：React-konva - Conneting Circle with a Line using mouse clickReact-konva - 使用鼠标单击用线连接圆
【发布时间】：2020-03-25 10:36:44
【问题描述】：

我正在使用react-konva，我有两个Circle 组件，我想用Line 连接它们。我已经通过硬编码实现了这一点，但我想让它具有交互性。

我的目标：当我点击一个Circle 组件时，它会创建一个Line 组件。然后，如果我单击另一个 Circle，两者都将通过该 Line 连接。

我的问题：我不知道该怎么做。我对想法持开放态度。

【问题讨论】：

你有什么尝试吗？只需在Circle 上收听click 事件。并将一个标记为start，另一个标记为end，并更新状态。
@lavrton，我很好奇这个start 和end。请给我一些代码好吗？如果它足够简单，我可以在之后继续工作。

标签： reactjs konvajs react-konva konvajs-reactjs

【解决方案1】：

有很多方法可以实现它。你可以这样做：

import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Circle, Line, Text } from "react-konva";

function generateShapes() {
  const shapes = [];
  for (var i = 0; i < 10; i++) {
    shapes.push({
      id: i,
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight
    });
  }
  return shapes;
}

const INITIAL_SHAPES = generateShapes();

const App = () => {
  const [shapes, setShapes] = React.useState(INITIAL_SHAPES);
  const [connectors, setConnectors] = React.useState([]);

  const [fromShapeId, setFromShapeId] = React.useState(null);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {connectors.map(con => {
          const from = shapes.find(s => s.id === con.from);
          const to = shapes.find(s => s.id === con.to);

          return (
            <Line
              key={con.id}
              points={[from.x, from.y, to.x, to.y]}
              stroke="black"
            />
          );
        })}
        {shapes.map(shape => (
          <Circle
            x={shape.x}
            y={shape.y}
            key={shape.id}
            fill={fromShapeId === shape.id ? "red" : "green"}
            radius={20}
            shadowBlur={10}
            onClick={() => {
              if (fromShapeId) {
                const newConnector = {
                  from: fromShapeId,
                  to: shape.id,
                  id: connectors.length
                };
                setConnectors(connectors.concat([newConnector]));
                setFromShapeId(null);
              } else {
                setFromShapeId(shape.id);
              }
            }}
          />
        ))}
        <Text text="Click on on circle then on another to connect them" />
      </Layer>
    </Stage>
  );
};

render(<App />, document.getElementById("root"));

演示：https://codesandbox.io/s/react-konva-connecting-shapes-demo-usr05

【讨论】：