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

[arunkumar413]

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

[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