How to get ending position of line in React-Konva

Question

Sorry, I'm new to coding and am struggling on something I believe is quite basic.

I want to draw a shape via multiple konva line objects. Once I've created a line, instead of manually calculating where the next line should begin, I'm thinking there has to be a way of grabbing the ending position of the last line and setting that as the beginning point of the new line.

As you can see below. I've been calculating the beginning values manually.

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;

score 0 · Answer 1 · answered Apr 14 '20 at 04:44

I checked your code. But I am having a question now. Why you are going to using multiple Line objects? I think your purpose is to connect lines. For this purpose, you can add more values to points. This will automatically make a line that connects endpoints to the next point. Use like this.

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

I added many points data to Points. Just this. points={[0, 0, 0, 40, 30, 70, 20, 90, 40, 150]} This means (0,0), (0,40), (30,70), (20,90), (40,150) from start point (675, 550).

Check here result lines

So you don't need to use multiple Line object to draw connected lines.

I'd still be calculating the points manually. I need to create or access a function that returns the ending coordinates of a line. — Steven Michael, Apr 14 '20 at 04:55

score 0 · Answer 2 · answered Apr 14 '20 at 08:26

        {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}
            />
          )
        })}

Added Line Component with didmount as follow. componentDidMount() { this.props.onCalculateLastPoint({ x: this.props.x + this.props.points[2], y: this.props.y + this.props.points[3] }, this.props.pointIndex + 1} — Dmytro Myronenko, May 03 '20 at 18:52

How to get ending position of line in React-Konva

2 Answers2