带有路径连接器的jQuery可拖动小部件

Question

参考图像，Block1和Block2都可以拖动。

我的问题是：如何在两个块之间制作像连接器一样的红色链？要求是链应该延伸到拖动块的任何位置。请提供教程/学习资料的任何指示。感谢。

Answer 1

有许多Jquery插件可用于创建数据库可视化或流程图的连接器。如果像我这样的人正在寻找这样的插件，可能想看看下面的插件。

JointJS
Rappid
Mxgraph
GoJS
Raphael
Draw2D
D3
FabricJS
paperJS
JsPlumb
FlowChart

以下链接可能会有所帮助。

http://modeling-languages.com/javascript-drawing-libraries-diagrams/

Answer 2

GoJS可让您定义自己的链接路径自定义呈现，如以下示例所示：http://gojs.net/latest/samples/relationships.html

以下是在定义链接模板时如何创建红色V形图案：

$(go.Link, go.Link.Orthogonal,
  $(go.Shape,
    {
      stroke: transparent,
      pathPattern: $(go.Shape,
       {
         geometryString: "F1 M2 3 L0 0 6 0 8 3 6 6 0 6z",
         fill: "red",
         strokeWidth: 0
       })
    })
)

这会产生以下结果：