jsPlumb: 粗箭头是什么？

Question

我希望在jsPlumb中使用一个带有漂亮提示的箭头。

这是我想要的效果：

但是我得到的却是这样：

我该如何更改设置？

以下是我目前使用的设置：

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

我之前一直在使用SVG中的箭头。在那里，我可以简单地改变箭头的SVG代码以使其向前移动，这样线条的末端（线条末点的坐标）就在箭头三角形内部了。但是在jsPlumb中似乎无法做到这一点。

我知道很难表达这个问题。

以下是我的另一个尝试：

- Swiss Mister

---

你尝试过负位置吗？虽然不熟悉那个库，但箭头点和线的起点在同一位置，由于箭头点较窄，因此您可以看到该线。 - charlietfl

好的观点 - 这正是我最初预期的。但是，任何小于0或大于1的值都被视为从起点或终点开始的像素数...请参见文档。因此，您无法在“线”之外移动。 - Swiss Mister

你不能改变 connector 的位置吗？你可以将它设置为从5开始。 - FcoRodr

感谢@FranciscoRodríguez：0..1范围之外的任何值都被解释为沿直线内的像素数（负数：从起点，正数：从终点）。但我需要的是一种将箭头推到线的端点之外的方法（或者缩短线的长度的替代方法）。我没有看到任何可能性可以实现这两个目标。 - Swiss Mister

我所考虑的是保持箭头不变，移动直线。指针将位于箭头的尖端，因此移动线条的位置并不重要（据我理解）。 - FcoRodr

Answer 1

将位置设置为0.99实际上对我有用。请尝试以下操作：

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

- Vaxo Basilidze

---

谢谢@VaxoBasilidze。恐怕这不会有任何区别 - 请解释一下您认为这会有什么区别。 - Swiss Mister

@SwissMister 我已经编辑了我的答案。很奇怪，但是对我来说位置：0.99实际上可以实现你想要的效果。也试试吧。 - Vaxo Basilidze

感谢@VaxoBasilidze！这是一个非常有创意的发现！它确实有效。实际上，在当前版本的jsPlumb（2.5.7）中，只需将我的原始代码中的“location”从“1”更改为“0.99”即可得到正确的答案。如果您编辑您的答案，我会接受它。 - Swiss Mister

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

- Nandu Kalidindi

---

感谢@NanduKalidindi。没有运气。之前尝试过这个方法-确实会更好地定位箭头-但它不指向箭头的方向。请参见https://imgur.com/a/5CHG0 - Swiss Mister

很意外它没有工作，如果可能的话，你能否创建一个JSFiddle？ - Nandu Kalidindi

你的连接器类型是固定的还是可以更改的？如果可以更改，请尝试将其更改为 connector:"StateMachine"。 - Nandu Kalidindi

非常热门的提示！你是对的 - 这个可行。唉，我需要一个“直”的连接器。有什么办法可以修复吗？ - Swiss Mister

刚刚发现我可以设置一个小的（虽然不是零！）curviness参数来获得一个几乎直的箭头：connector: ["StateMachine", {curviness:0.001}]。 - Swiss Mister

Answer 3

我猜看了github，这个问题至今没有解决，仍然是一个未解决的问题。该问题在2014年被提出。

一个解决方案是通过黑客攻击库本身来添加箭头对象的边距或填充等属性。

更新：

我尝试在库本身中找到答案。请看下面的图片，它正在进行一些数学计算。如果你擅长这方面，请调整一下就可以了！

这里正在使用 extents:

更新2：

尝试使用以下位置数组：（演示：http://jsfiddle.net/crerhawn/）

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

- shyammakwana.me