Determine the position along curved link path

GoJS
1

Hi,

I am trying to replicate the pathAnimation example [1], but using curved lines instead or straight ones. I am stuck at the determination of the position of the point at a fraction of the link.

The example code for straigt line is
// assume straight lines, for now var start = link.getPoint(0); var end = link.getPoint(link.pointsCount - 1); var x = start.x + frac * (end.x - start.x); var y = start.y + frac * (end.y - start.y); token.location = new go.Point(x, y);

How can I compute the new location for a curved link?

[1] Concept Map with animation along paths

2

Bezier curves also have a parametric form, as you can find on the web.

At the current time we do not have an efficient way to calculate what you want that is exposed as part of the API. However you can try using the undocumented Geometry method getPointAlongPath(fraction), which takes a fraction between 0 and 1 and which returns a Point.

3

I used the Bezier parametric form and it works great. Thanks!

Some documentation for getPointAlongPath would be great, for a more general solution.

4

Hi @MatthieuB,

Would you mind sharing a sample code? I too got stuck on a similar issue.

Thanks,
SSP

5

Hi @ssp,

I use this function :

function binomial(n, k) {  
  if ((typeof n !== 'number') || (typeof k !== 'number'))  return false;   
  var coeff = 1;  
  for (var x = n-k+1; x <= n; x++) coeff *= x;  
  for (x = 1; x <= k; x++) coeff /= x;  
  return coeff;  
}

function get_position_on_bezier_lines(link, frac) {
      var x=0, y=0, q=0;
      for(var i=0; i < link.pointsCount; i++) {
        var b = binomial(link.pointsCount - 1, i);
        var r = Math.pow(1-frac, link.pointsCount - i - 1) * Math.pow(frac, i) * b;
        var point = link.getPoint(i);
        q += r;
        x += r * point.x;
        y += r * point.y;
      }
      return  new go.Point(x / q, y / q);
}
6

Thanks much for the quick response MatthieuB…appreciate it.

And YES, it worked like a charm.