Search code examples
javascriptjsplumb

jsPlumb: fat arrow?

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

This is what I want:
enter image description here

This is what I get:
enter image description here

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: enter image description here

Solution

  • 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 } ]]