如何用一条线将元素相互连接 Angular
How to connect the elements with each other by a line Angular
如何像图中那样用线连接元素?当您单击一个圆圈然后单击另一个圆圈时,应绘制一条线。也许这个任务有一个图书馆,我已经搜索过但没有找到任何有用的东西。 Angular.
更新
屏幕大小也要改线。我也在考虑应用 d3 和 cytoscape 等库,因为它们似乎允许绘制此类线条。也许有人有一些例子?
您可以使用 GoJs.
GoJ 与 angular 兼容。 (Document)
此示例与您的需求相似:sample one, sample two
你可以用 svg 制作这些东西。因为它只有几行和几圈。我在这里拼接一个小例子:https://stackblitz.com/edit/angular-ivy-ovhbww
它基本上使用 svg 来绘制东西。 Svg 是创建的,因为您可以根据需要添加事件和动画。使用相当简单的代码。我放在 link 中的内容更多是关于如何做到这一点的灵感。与其说它是最伟大的代码:)
我找到了适合我的解决方案:LeaderLine
如何像图中那样用线连接元素?当您单击一个圆圈然后单击另一个圆圈时,应绘制一条线。也许这个任务有一个图书馆,我已经搜索过但没有找到任何有用的东西。 Angular.
更新
屏幕大小也要改线。我也在考虑应用 d3 和 cytoscape 等库,因为它们似乎允许绘制此类线条。也许有人有一些例子?
您可以使用 GoJs.
GoJ 与 angular 兼容。 (Document)
此示例与您的需求相似:sample one, sample two
你可以用 svg 制作这些东西。因为它只有几行和几圈。我在这里拼接一个小例子:https://stackblitz.com/edit/angular-ivy-ovhbww 它基本上使用 svg 来绘制东西。 Svg 是创建的,因为您可以根据需要添加事件和动画。使用相当简单的代码。我放在 link 中的内容更多是关于如何做到这一点的灵感。与其说它是最伟大的代码:)
我找到了适合我的解决方案:LeaderLine