javascript - 带有路径连接器的 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
       })
    })
)

这将产生以下结果：