Как получить конечную позицию линии в React-Konva - PullRequest
Новая
       32

Как получить конечную позицию линии в React-Konva

0 голосов
/ 14 апреля 2020

Извините, я новичок в кодировании и борюсь с чем-то, что, на мой взгляд, довольно основательно c.

Я хочу нарисовать фигуру с помощью нескольких линейных объектов конва. Как только я создал строку, вместо того, чтобы вручную вычислять, где должна начинаться следующая строка, я думаю, что должен быть способ получить конечную позицию последней строки и установить ее в качестве начальной точки новой строки.

Как вы можете видеть ниже. Я рассчитывал начальные значения вручную. 

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;

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020 
        {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}
            />
          )
        })}
0 голосов
/ 14 апреля 2020

Я проверил твой код. Но у меня сейчас вопрос. Почему вы собираетесь использовать несколько объектов 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]} Это означает (0,0), (0,40), (30,70), (20,90) , (40,150) от начальной точки (675, 550).

Проверьте здесь строки результата

Так что вам не нужно использовать несколько объектов Line для рисования связанных линий ,

...