How can I plot against a curved path on an svg at specific x positions on the path?

113 Views Asked by At

I have a 2 rows of circles (imagine 2 rows of seats in a seating chart) that are on straight line, like this:

Seating Chart with straight circles

I need to curve the rows relative to the longest row (ie row B). I can correctly calculate the curve of each row:

enter image description here

Row B's circles follow the path correctly, but I need row A's circles to also follow the path as well. You can see that the circles are off. I need the X position of each circle to stay fixed, but Y to follow that direction of the path. I'm trying to calculate what the Y position of each circle in row A would be based on it's Y's position on that path, but can't seem to figure it out. Is there a specific calculation on this?

The way I'm attempting this is:

      row.seats.forEach((seat, index) => {
          const offset = index * spacing;
          const point =  curvePath.getPointAtLength(offset); 
      ;
         var curveY = point.y; //keep x fixed and only move y
         seat.attr('cy', curveY);
     })     

Not getting the expected result. I need to find the Y position of that path if I were to center row A's circles on to that path so it ultimately looks like this:

Correct Curved Path

How can I determine the path Y position of each circle based on the circle's x position? I've posted a codepen here to demo the paths: https://codepen.io/iamakimmer/pen/eYKOawd. I'm using RaphaelJS but ultimately it's SVG paths and shapes.

0

There are 0 best solutions below