jsPlumb：胖箭？

Question

我想在jsPlumb中使用一個很棒的箭頭。

這就是我要的：

這就是我得到的：

如何更改設置？

這是我目前使用的：

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

我以前一直在使用SVG中的箭頭。 在那里，我可以簡單地改變頭部的SVG代碼向前移動，使得線的末端（線端點的坐標）在箭頭三角形內。 我似乎無法在jsPlumb中執行此操作。

我覺得很難傳達這個問題。

這是下一個嘗試：

Answer 1

將位置設置為0.99實際上對我有用。 嘗試這個：

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

Answer 2

這可能會奏效。 請試一試

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

查看此網頁中的覆蓋位置部分https://jsplumbtoolkit.com/community/doc/overlays.html#adding

Answer 3

這個沒有解決方案，直到我想通過查看github，這仍然是一個懸而未決的問題 。 問題於2014年開始 。

一種解決方案是黑客庫本身，以向Arrow對象添加邊距或填充類型的屬性。

更新：

我試圖弄清楚圖書館本身。 請參見下面的圖像，它正在進行一些數學計算。 如果你擅長它，調整它就完成了！

並且extents區域是用戶：

UPDATE2：

嘗試位置數組如下：（演示： http ： //jsfiddle.net/crerhawn/ ）

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