jsPlumb：胖箭头？答案

【问题标题】：jsPlumb: fat arrow?jsPlumb：胖箭头？
【发布时间】：2017-11-04 19:26:32
【问题描述】：

我想要jsPlumb 中的粗箭头和漂亮的提示。

这就是我想要的：

这是我得到的：

如何更改设置？

这是我目前使用的：

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

我之前一直在 SVG 中使用箭头。在那里，我可以简单地将头部的 SVG 代码更改为向前移动，以便线的末端（线端点的坐标）位于箭头三角形内。我似乎无法在 jsPlumb 中做到这一点。

我发现这个问题很难表达。

这是下一次尝试：

【问题讨论】：

您是否尝试过否定位置？不熟悉该库，但箭头点和线从同一位置开始，由于箭头较窄，您会看到线
好点 - 这就是我最初的预期。但是任何 1 都被分别视为从开始或结束开始的像素数......请参阅docs。所以你不能移动“越界”。
您不能更改connector 位置吗？您将其设置为从 5 点左右开始。
感谢@FranciscoRodríguez：0..1 范围之外的任何值都被解释为直线内的像素数（负数：从开始，正数：从结束）。但我需要的是一种将箭头推到 outside 线端点的方法（或者，使线更短）。我看不出任何可能性。
我的想法是保持箭头不变并移动直线。指针将位于箭头的尖端，因此将线移动到哪里都没有关系（据我了解）

【解决方案1】：

将位置设置为 0.99 实际上对我有用。试试这个：

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

【讨论】：

谢谢@VaxoBasilidze。恐怕这没什么区别 - 请解释为什么您认为这会有所不同。
@SwissMister 我已经编辑了我的答案。奇怪，但 location: 0.99 实际上对我来说是你想要达到的目标。也试试吧。
谢谢@VaxoBasilidze！这是一个创造性的发现！这确实有效。实际上，在我的原始代码中将location 从1 更改为0.99 是当前版本的jsPlumb (2.5.7) 中的正确答案。如果您编辑答案，我会接受。

【解决方案2】：

这可能会奏效。请尝试一下

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

【讨论】：

谢谢@NanduKalidindi。没运气。之前尝试过 - 确实会以更好的方式定位箭头 - 但它并不指向箭头的方向。见imgur.com/a/5CHG0
令人惊讶的是它不起作用，如果可能的话，您能创建一个 JSFiddle 吗？
您的连接器类型是固定的还是可以更改的。如果是，请尝试将其更改为connector:"StateMachine"
非常热门的提示！你是对的 - 这行得通。唉，我需要一个“直”连接器。有什么办法可以解决这个问题？
刚刚发现我可以设置一个小的（虽然不是零！）curviness 参数来获得一个几乎直箭头：connector: ["StateMachine", {curviness:0.001}]

【解决方案3】：

到目前为止，我想通过查看 github，这仍然没有解决方案，它仍然是 open issue。问题于 2014 开放。

一种解决方案是破解库本身以向箭头对象添加边距或填充类型的属性。

更新：

我试图在图书馆本身中弄清楚。请参阅下图，它正在执行一些数学计算。如果你擅长它，调整它，你就完成了！

extents 是这里的用户：

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

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

【讨论】：