CODEWITHSUNDEEP
javascriptarraysreactjsmultidimensional-array
Alisson Blaas
Alisson Blaas

Reputation: 15

Create line between two or more array points in javascript - ReactJS

sup? I have a doubt

I have an array of 24 numbers:

const array = [1,2,3,4,5,6,7,8,9,10...]

how do I draw a line between array 1,2,4 and 5 for example?

It is being render as a "matrix" and I wanted to make this line go through the matrix

my "matrix" example:

"matrix"

1,2,3,4,5
6,7,8,9,10
11,12,13,14,15

to go starting from 1, passing through 7,8,13,14,15 how would they do it? I have no idea.

I want to do something like this:

I WANT TO DO SOMETHING LIKE THIS ONE

Upvotes: 0

Views: 505

Answers (1)

Karol Pawlak
Karol Pawlak

Reputation: 464

Assuming You have matrix with identical elements, I would try to calculate total width and height of that matrix, then add overlaying canvas, and start to draw over it. There is a
quick info how to draw using canvas in react.

Knowing size of each element in your matrix, this should be quite easy to calculate the coordinates. eg.

If your calculated area is 250x150 and you have 5x3 matrix, the element is 50x50. Connecting elements 1,2,9 from your example would give you (0, 0), (50, 0), (150, 50). If the line should be anchored in the middle of element simply add offset equal to half of element size.

Upvotes: 1

Related Questions