jsPlumb: fat arrow?

Question

I want a fat arrow in jsPlumb with a pretty tip.

This is what I want:

This is what I get:

How can I change the settings?

Here's what I currently use:

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

I have been using arrows in SVG before. There, I could simply change the SVG code of the head to be moved forward so that the end of the line (the coordinates of the line end point) is inside the arrowhead triangle. I don't seem to be able to do this in jsPlumb.

I see it is difficult to convey the problem.

Here's a next try:

user_8860619 · Answer

Setting the location to 0.99 actually did the thing for me. Try this:

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

user_4724167 · Answer

This could probably work. Please try it out

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

Check out the Overlay location section in this webpage https://jsplumbtoolkit.com/community/doc/overlays.html#adding

user_2219158 · Answer

This has no solution till date I guess by looking at github, It's still an open issue. Issue was opened in 2014.

One solution would be hacking library itself to add margin or padding kind of property to Arrow Object.

update:

I tried to figure out in library itself. See this below image where it's doing some math calculations. If you're good at it, tweak it and you're done!

And extents are being user here:

Update2:

Try Location array like below: (demo: http://jsfiddle.net/crerhawn/)

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

jsPlumb: fat arrow?

3 Answers

update:

Update2: