JsPlumb: bold arrow?

Question

I need a bold arrow in jsPlumb with good advice.

This is what I want:

This is what I get:

How to change settings?

Here is what I am using now:

PaintStyle: { stroke: "#f00", strokeWidth: 20 }, connector: ["Straight"], connectorOverlays:[["Arrow", { location:1, width:70, length:70 } ]] 

I used to use arrows in SVG. There, I can simply change the SVG code of the head, which needs to be moved forward so that the end of the line (the coordinates of the end point of the line) is inside the triangle of the arrow. I can't seem to do this in jsPlumb.

I see that it is difficult to convey the problem.

Here is the following attempt:

Answer 1

Setting the location to 0.99 actually did it for me. Try the following:

 PaintStyle: { stroke: "#f00", strokeWidth: 20 }, connector: ["Straight"], connectorOverlays:[["Arrow", { location:0.99, width:70, length:70 } ]] 

Answer 2

Maybe it will work. Please, try

 connector: ["StateMachine", {curviness:0.001}], connectorOverlays:[ [ "Arrow", { location: [0.5, 0.5], width: 70, length: 70 } ] ] 

See the “Overlay Location” section on this webpage https://jsplumbtoolkit.com/community/doc/overlays.html#adding

Answer 3

I don't have a solution up to date, I think looking at github it is still an open problem . The problem opened in 2014 .

One solution would be to hack the library to add a marker or property addition to the Arrow object.

update:

I tried to find out in the library itself. See this below, where he does the math. If you are good at it, set it up and you're done!

And extents the user here:

Update2:

Try the array location as shown below: (demo: http://jsfiddle.net/crerhawn/ )

 ["Arrow", { location:[0.5,0.5], width:70, length:70 } ]