How to draw the SVG path from the path array returned by the algorithm?

[arunkumar413]

Hello Team,

The path array returned by pathfinder is lengthy. Could you please guide me on how to draw the svg path and also for converting the array into svg path's H and V commands.

Thanks,
Arun

[brean]

Hi Arun,

The returned path is a list of coordinates in a 2D-Array representing a map. If you like to visualize that as SVG-path you have to calculate the positions based on your cell size. I think easiest would be to use a SVG-Polyline to represent it as line. If you like to use SVG M and L you could copy from the buildSvgPath-Function in visual/js/view.js: https://github.com/qiao/PathFinding.js/blob/master/visual/js/view.js#L254:L265

Andreas

[arunkumar413]

@brean

Instead of poly line which which makes the attribute lengthy, I was thinking it's better to indentify the bends in the path aray and convert them into a few H and V commands of svg path.

[brean]

Hi Arun,
yes, it will be twice as long but why is that a problem?
If you really want you can calculate the difference between one points position and the next and then see if y or x changed and then create your string accordingly. Note that you are not able to display diagonal movement with only H and V.

[arunkumar413]

If I serialize and save It might need more memory. Also I created small circles using the path array. But it created a random path as opposed to smoother horizontal and vertical lines.

Here is the configuration:

grid = new pathfinding.Grid(1000, 1000);
  finder = new pathfinding.AStarFinder({
    allowDiagonal: false,
    heuristic: pathfinding.Heuristic.manhattan,
    weight: 1,
  });

and code to create the circles to trace the path

  path.forEach(function (item, index) {
    return s.circle(item[0], item[1], 1).attr("fill", "#ff0000");
  });

[killmenot]

@arunkumar413 you can research how it's implemented in react-flow. In the past I created my own react-flow edge implementation which use PathFinding.js to calculate the path

[arunkumar413]

@killmenot I'd like to create my own as well but I'm not understanding why it created a random path instead of a Manhattan path.

Here what does the cell size refer to? I'm using svg and dimensions are in pixels only.

[arunkumar413]

I have isolated the issue for you here: https://stackblitz.com/edit/react-febp9q?file=src%2FApp.js

I also used the buildSVGPath function but it didn't create a manhattan path

[arunkumar413]

It's working as expected if I apply the weight other than 1

weight: 2