How to place shapes along a bezier curve link?

GoJS
1

I am trying to create a custom link type that will render as a bezier curve with a visible stub at each end, and transparent in the middle. I want to show a shape at the end of each of the stubs. Something like this (gojs semi-hidden links - JSFiddle - Code Playground):

image

I thought I had this working, but it fails for this kind of long link…

image
image774×382 17.2 KB

In this case (gojs semi-hidden links - JSFiddle - Code Playground), I am also placing a Square shape at what I hoped to be the midpoint of the link, relying on what I read in the “Labels on Links” topic saying it will be positioned in the middle of a link. It looks like it’s placing the square at an attractive automatic position (red circle), but not in the actual middle of my long link. In the above screenshot, the midpoint would be down nearer the bottom right corner of the link. My strategy for placing the shapes in the right place along the curve was to calculate and apply a segmentOffset, which seemed to work well for the simpler short links. Because the shapes aren’t really originating at the actual midpoint of my longer link, my math doesn’t work now, and the shapes (pointed to by red arrows) end up moved too high.

So, my whole goal here is to place shapes at arbitrary points along the bezier curve to create the look for my stubs, and the way I thought I could do that was to translate them via segmentOffset from their location at the link midpoint. Now I realize that I don’t really know the starting point for the shape, so I can’t calculate an appropriate segmentOffset. Is there a better way I can place the shapes to they always end up on the curve?

thanks!

2

We’re currently working on some improvements to the library for positioning of link labels along the link’s route which should be coming out in the next release. Those changes should make it easier to achieve what you want here.

3

Thanks for the info.

I realized I can accomplish what I want in this case by forcing the Shapes’ segmentIndex and segmentFraction to 0 and doing the transforms starting from those link origin coordinates instead of the midpoint. It seems to work well with the links I’ve tried.

One more question I had about this… in my current diagram, the layout always goes down, so I know that the initial link angle will be in that direction. Is there a method to calculate the link angle at a given point on the link (though I only care about the initial angle at the moment)? Is it safe to use Link.points and just get the angle between the first two points?

4

Yes, I think so.

5

Excellent, thank you for your help.

6

We just released 2.1.4, which includes improvements to finding points along a link route using segmentIndex and segmentFraction. They may make your calculations simpler if you’re interested.