如何在 React-Konva 中获取行的结束位置

Question

抱歉，我是编码新手，并且在我认为非常基本的事情上苦苦挣扎。

我想通过多个 konva 线对象绘制一个形状。一旦我创建了一条线，而不是手动计算下一行应该从哪里开始，我认为必须有一种方法来获取最后一行的结束位置并将其设置为新行的起点。

如下所示。我一直在手动计算起始值。

import React, { Component } from "react";
import Konva from "konva";
import { Stage, Layer, Rect, Text, Circle, Line, Group } from "react-konva";

class Perimeter extends Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Group>
            <Line
              ref="topBar"
              x={450}
              y={150}
              points={[0, 0, 575, 0, 0, 0]}
              stroke="blue"
              strokeWidth={4}
            />
            <Line
              x={450}
              y={150}
              points={[0, 0, 0, 350, 0, 0]}
              stroke="blue"
              strokeWidth={4}
            />
            <Line
              x={1025}
              y={150}
              points={[0, 0, 0, 400, 0, 0]}
              stroke="blue"
              strokeWidth={4}
            />
            <Line
              x={450}
              y={500}
              points={[0, 0, 150, 0, 0, 0]}
              stroke="blue"
              strokeWidth={4}
            />
            <Line
              x={600}
              y={500}
              points={[0, 0, 0, 100, 0, 0]}
              stroke="blue"
              strokeWidth={4}
            />
            <Line
              x={675}
              y={550}
              points={[0, 0, 0, 0, 350, 0]}
              stroke="blue"
              strokeWidth={4}
            />
            <Line
              x={675}
              y={550}
              points={[0, 50, 0, 0, 0, 0]}
              stroke="blue"
              strokeWidth={4}
            />
          </Group>
        </Layer>
      </Stage>
    );
  }
}

export default Perimeter;

Answer 1

我检查了你的代码。 但我现在有一个问题。为什么要使用多个 Line 对象？ 我认为您的目的是连接线路。为此，您可以为点添加更多值。这将自动创建一条将端点连接到下一个点的线。 像这样使用。

<Line x={675} y={550} points={[0, 0, 0, 40, 30, 70, 20, 90, 40, 150]} stroke="blue" strokeWidth={4}/>

我在 Points 中添加了许多点数据。只是这个。点={[0, 0, 0, 40, 30, 70, 20, 90, 40, 150]} 这意味着从起点 (675, 550) 开始的 (0,0), (0,40), (30,70), (20,90), (40,150)。

Check here result lines

所以你不需要使用多个 Line 对象来绘制连接线。

Answer 2

        {lines.map((line, index) => {
          const points = [0, 0]
          line.fromTo.map((item, index) => {
            item.x += line.fromTo[index - 1]? line.fromTo[index - 1].x:0
            item.y += line.fromTo[index - 1]? line.fromTo[index - 1].y:0
            points.push(item.x, item.y)
            return false
          })
          return (
            <Line
              key={index}
              ref={line.ref}
              x={line.start.x}
              y={line.start.y}
              points={points}
              stroke={line.stroke}
              strokeWidth={line.strokeWidth}
            />
          )
        })}