开源、易扩展、方便集成的在线绘图(微服务架构图、网络拓扑图、流程图)工具

2019-09-04 11:26:39 +08:00
 Alsmile

一个基于 typescript + canvas 实现的开源在线绘图的引擎 Topology。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。目前暂时实现了基本图形、流程图图形库,能够满足微服务架构图、网络拓扑图和流程图的绘制。后面计划陆续实现活动图 /时序图 /类图等 UML 图。

→ 在线体验 (因为操作方便问题,暂时没有适配移动端)

为什么重复造轮子

特点

使用场景

后续会推出的:

架构设计

主要由:层、节点、连线和箭头等组成。

层:这里的层,主要是为了提升性能的逻辑层;与类似 ps 里面的用户图层无关。

离屏层:包含所有绘图数据,是最稳定的图层。

选中层:用户选中部分或全部节点 /连线的高亮图层,并设置相关属性、缩放、和旋转等。

动画层:主要用于演示动画。活动层:主要用于箭头鼠标交互事件,比如锚点和连线过程。

节点:是画布的主要组成部分,节点内部还可以包含图标或文字。

连线和箭头:连线和箭头是关联在一起的。连线两端可以选择设置或不设置箭头。节点可以通过控制点进行整体缩放、旋转。连线只表示节点描点间的连线,不存在缩放、旋转。节点缩放或旋转会造成控制点的重计算。连线形状可以由线的控制点改变。

项目地址

Github

开发文档

4440 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/597796

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX