0

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

我想通过多个 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;

4

2 回答 2

0

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

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

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

在此处检查结果行

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

于 2020-04-14T04:44:57.770 回答
0 
        {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}
            />
          )
        })}
于 2020-04-14T08:26:52.050 回答