前端开源、易扩展、方便集成的绘图工具（微服务架构图、网络拓扑图、流程图、活动图等）
le5le-topology是一款开源、易扩展、方便集成的在线绘图（微服务架构图、网络拓扑图、流程图、活动图、时序图、类图、动画等）的软件项目。前端
基于 typescript + canvas 实现的开源在线绘图的引擎 Topology。采用引擎 + 图形库中间件的思路可以方便、快速的扩展、集成到前端项目。node
在线无偿使用（由于操做方便问题，暂时没有适配移动端） 产品介绍git
为何重复造轮子
- 笔者工做中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求
- 开源、知足本身需求的很少
- typescript + 纯粹canvas架构的很少
- 以中间件方式可定制知足不一样场景的很少
- 动画支持
特色
- 开源
- 动画
- 可定制化
- 简单易用，方便集成
- 支持旋转、缩放、文字属性、边框属性、背景、连线动画等
- 较好的性能，很是流畅
- 方便的数据导入导出
- 图片保存/预览
- typescript + canvas
使用场景
- 微服务架构图
- 运维时部署结构拓扑图
- 流程图
- 活动图
- 时序图
- 类图等
- 类SCADA
架构设计
主要由：层、节点、连线和箭头等组成。
es6
层：
这里的层，主要是为了提高性能的逻辑层；与相似ps里面的用户图层无关。github
离屏层：包含全部绘图数据，是最稳定的图层。typescript
选中层：用户选中部分或所有节点/连线的高亮图层，并设置相关属性、缩放、和旋转等。npm
动画层：主要用于演示动画。canvas
活动层：主要用于箭头鼠标交互事件，好比锚点和连线过程。api
节点：
是画布的主要组成部分，节点内部还能够包含图标或文字。bash
连线和箭头：
连线和箭头是关联在一块儿的。连线两端能够选择设置或不设置箭头。
节点能够经过控制点进行总体缩放、旋转。
连线只表示节点描点间的连线，不存在缩放、旋转。节点缩放或旋转会形成控制点的重计算。连线形状能够由线的控制点改变。
绘画与属性
节点和连线各类有自身的绘画属性，同时还能够设置一个附加的自定义数据
快速集成使用
es6使用示例：
typescript使用示例：
安装
使用npm（或yarn）方式安装使用。
# 安装绘图引擎
npm install topology-core
# 安装图形库 - 流程图
npm install topology-flow-diagram
# ...其余图形库复制代码
建立基础画布
// 1. 导入绘画引擎
import { Topology } from 'topology-core';
// 2. 建立画布
// 其中，第一个参数'topo-canvas'表示canvas的dom元素id；
// 第二个参数{}表示画布选项，这里表示所有使用默认值。具体选项请参考后面的api文档。
var canvas = new Topology('topo-canvas', {});
// 3. 渲染图形
// 其中，第一个参数{}表示图形数据
// 第二个参数true，表示打开一个新文件；不然在当前文件打开，覆盖已存在的图形数据
canvas.render({}, true);复制代码
经常使用画布方法
// 获取画布数据
const data = this.canvas.data();
// 保存为图片blob
// toImage函数参数：type, quality, callback
this.canvas.toImage(null, null, blob => {
// Do sth.
});
// 下载为图片
// saveAsImage函数参数：filename, type, quality
this.canvas.saveAsImage('canvas.png');
// 编辑相关操做
this.canvas.cut();
this.canvas.copy();
this.canvas.parse();
this.canvas.undo();
this.canvas.redo();复制代码
引用第三方图形库
// 使用第三方图形库
// 1. 先导入注册函数
import { registerNode } from 'topology-core/middles';
// 2. 导入图形库图形及其相关元素
import {
flowData,
flowDataAnchors,
flowDataIconRect,
flowDataTextRect,
flowSubprocess,
flowSubprocessIconRect,
flowSubprocessTextRect,
flowDb,
flowDbIconRect,
flowDbTextRect,
flowDocument,
flowDocumentAnchors,
flowDocumentIconRect,
flowDocumentTextRect,
flowInternalStorage,
flowInternalStorageIconRect,
flowInternalStorageTextRect,
flowExternStorage,
flowExternStorageAnchors,
flowExternStorageIconRect,
flowExternStorageTextRect,
flowQueue,
flowQueueIconRect,
flowQueueTextRect,
flowManually,
flowManuallyAnchors,
flowManuallyIconRect,
flowManuallyTextRect,
flowDisplay,
flowDisplayAnchors,
flowDisplayIconRect,
flowDisplayTextRect,
flowParallel,
flowParallelAnchors,
flowComment,
flowCommentAnchors
} from 'topology-flow-diagram';
// 3. 向引擎注册图形库图形及其相关元素
registerNode('flowData', flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);
registerNode('flowSubprocess', flowSubprocess, null, flowSubprocessIconRect, flowSubprocessTextRect);
registerNode('flowDb', flowDb, null, flowDbIconRect, flowDbTextRect);
registerNode('flowDocument', flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect);
// ...
// 下面是简单的注册函数介绍，详情请参考api文档
// registerNode: 注册一个自定义图形节点node.
// name - node名称.
// drawFn - node渲染函数。传入canvas ctx和node数据，本身决定如何绘画node
// anchorsFn - 计算node的锚点，若是为null，表示使用缺省计算锚点方法
// iconRectFn - 计算node的图标区域，若是为null，表示使用缺省计算图标区域方法
// textRectFn - 计算node的文字区域，若是为null，表示使用缺省计算文字区域方法
// force - 若是已经存在同名node，是否覆盖.
export function registerNode(
name: string,
drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void,
anchorsFn?: (node: Node) => void,
iconRectFn?: (node: Node) => void,
textRectFn?: (node: Node) => void,
force?: boolean
);复制代码
开发本身的图形库
参考开发文档： www.yuque.com/alsmile/top…
项目地址
结语
我的周末开发，还有不少须要提高的空间，欢迎提出意见和交流。
微信：alsmile123
开源项目不易，你们以为好，不妨在GitHub点star支持: ），让我知道你们火热的关注，会更有动力哦。
我的服务器资源很是很是很是小，打开慢请耐心等待。欢迎资助 : )。
微信讨论群：（大群人数超过100，须要邀请入群；新群点击扫码进入）