core/shapes/line

[habib3962]

Hey Ramin!
Hope You’re good.

Can you please guide me for an issue I am facing.
When I create a line object.
How do I get its length like you can get width and height of rect object from its properties node->attrs

See pictures below

Thanks

[raminious]

@habib3962 you could use shape.node.getClientRect().width and shape.node.getClientRect().height

[habib3962]

Thanks, but is there any way we can get length of line. Because getClientRect().height is giving width and height of a box/rect. object

one more thing when we draw a line straight vertically or horizontally its behavior is different as compared to line i shared in screenshot above.
checkout this video
https://mega.nz/file/QlFATLqa#hrOii99tvDDkH4kJqf2m6U-5ApqKr59FV0FbkcK_8nk

[raminious]

but is there any way we can get length of line. Because getClientRect().height is giving width and height of a box/rect. object

You should do some math. Here is a link that may be helpful https://www.youtube.com/watch?v=Mzd1UgemJPM

one more thing when we draw a line straight vertically or horizontally its behavior is different as compared to line i shared in screenshot above.

Because the angles are different, I think it's a natural behavior of a Konva transformer

[habib3962]

Thanks i have applied that formula d = √(l² + w²)
but i am having an issue.
when i draw a line
i can get width and height from node.getClientRect().width and node.getClientRect().height
as you said.

but on rotating the values of Rect are changing constantly.
see the below video
https://mega.nz/file/09clkJJA#21L9r0DysQihIdGTUuA4XQbDH3NFiNDXNgJvHGy6Ax4

[raminious]

To calculate the length of the line, I think you should get P1 and P2 from the points array instead of getClientRect.
For example, if the line's points is [x1, y1, x2, y2, ...., xn, yn], then p1 is [x1, y1] and p2 is [xn, yn].

However, I'm not sure.

[habib3962]

Thanks a lot brother!
It really helped me out.

[raminious]

@habib3962 I'm glad to hear that. Best of luck to you 👍

[habib3962]

Hello Ramin!
Hope your doing good.

I have a question.
When I start creating a line and do not release the end point is there any way i can get points values on run time.
like before releasing can I get its points to get its length on run time.
check the video link below.
Thanks
https://mega.nz/file/099lmaZA#AY6E_EWbjBQI_HAK62vBif4d6NyCepLZPCH7ZgYWZos

[raminious]

Hey @habib3962
try editor.board.stage.getPointerPosition() - this is the last point