Topology 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Topology 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 TypeScript
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 国产
提 交 者 Alsmile
适用人群 未知
收录时间 2019-09-05

软件简介

Topology 是基于 typescript + canvas 实现的在线绘图的引擎。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。

配合VS Code插件一起使用

在vs code插件列表里搜索:le5le topology,或le5le-topology-plugin

查看插件

特性包括易扩展、方便集成等,可用于:

  • 微服务架构图
  • 拓扑图
  • 流程图/活动图/时序图/类图
  • 思维导图/脑图
  • 动画
  • 音频/视频
  • 开源
  • 可定制化
  • 轻量(100k左右),功能却很丰富
  • 简单易用,方便集成
  • 较好的性能,非常流畅
  • 方便的数据导入导出
  • 图片保存/预览
  • typescript + canvas

未来规划:

加入3D功能,全面、充分的可以实现智慧城市的3D可视化、SCADA 3D效果、物联网3D装配效果、安防等3D可视化场景。

为什么重复造轮子

  • 笔者工作中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求
  • 开源、满足自己需求的不多
  • typescript + 纯粹canvas架构的不多
  • 以中间件方式可定制满足不同场景的不多
  • 动画支持
  • 音视频支持,满足安防、物联网(暂无3D效果)等实时监控需求

架构设计

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

层:

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

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

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

动画层:主要用于演示动画。

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

 

节点:

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

 

连线和箭头:

连线和箭头是关联在一起的。连线两端可以选择设置或不设置箭头。

 

节点可以通过控制点进行整体缩放、旋转。

 

连线只表示节点描点间的连线,不存在缩放、旋转。节点缩放或旋转会造成控制点的重计算。连线形状可以由线的控制点改变。

绘画与属性

节点和连线各种有自身的绘画属性,同时还可以设置一个附加的自定义数据

 

快速集成使用

es6使用示例:

github.com/le5le-com/t…

typescript使用示例:

github.com/le5le-com/t…

vue使用示例:

https://github.com/le5le-com/topology-vue

react使用示例:

https://github.com/le5le-com/topology-react

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (29)

加载中
打分: 力荐
牛掰啦,必须点个赞。我当时用的mxgraph,不如这个强大,不知道是否会一直开源下去啊
10/28 19:17
回复
举报
厉害processon2
10/28 10:47
回复
举报
这个升压站的图画的可以呀
09/14 00:36
回复
举报
想要做到绑定数据实时更新该怎么做?我目前是用的canvas.open(data)这样重新渲染画布 有其他的方法实现吗?
03/27 10:49
回复
举报
Alsmile软件作者
从画布拿到数据canvas.data,参考文档:https://www.yuque.com/alsmile/topology/canvas 修改,然后重绘就可以了canvas.render() 参考demo: https://github.com/le5le-com/topology-es5-demo
05/13 23:48
回复
举报
Alsmile软件作者
系列开发教程:https://juejin.im/user/58b1336c570c3500696559f8/posts
2019/11/23 10:00
回复
举报
请问左侧的图标有iconfont的地址吗
2019/11/19 15:46
回复
举报
Alsmile软件作者
//at.alicdn.com/t/font_1113798_0532l8oa6jqp.css
2019/11/22 18:14
回复
举报
Alsmile软件作者
Symbol: //at.alicdn.com/t/font_1113798_0532l8oa6jqp.js
2019/11/22 18:15
回复
举报
Alsmile软件作者
@font-face { font-family: 'iconfont'; /* project id 1113798 */ src: url('//at.alicdn.com/t/font_1113798_0532l8oa6jqp.eot'); src: url('//at.alicdn.com/t/font_1113798_0532l8oa6jqp.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1113798_0532l8oa6jqp.woff2') format('woff2'), url('//at.alicdn.com/t/font_1113798_0532l8oa6jqp.woff') format('woff'), url('//at.alicdn.com/t/font_1113798_0532l8oa6jqp.ttf') format('truetype'), url('//at.alicdn.com/t/font_1113798_0532l8oa6jqp.svg#iconfont') format('svg'); }
2019/11/22 18:15
回复
举报
点个赞
2019/11/15 09:58
回复
举报
引入静态js时,当画线时前台会报this.options.on is not a function错
2019/11/01 11:57
回复
举报
Alsmile软件作者
这个是消息回调函数,需要用户自己传入
2019/11/05 09:13
回复
举报
Alsmile软件作者
多谢提醒,可以先传入一个空函数 new Topology('topo-canvas', {on: function(e){}}); 检查发现有个地方漏了判空
2019/11/05 09:19
回复
举报
请问下 那个左边的基本形状在es5是怎么实现的啊
2019/09/25 11:02
回复
举报
Alsmile软件作者
js只是一个核心引擎,提供了接口。要定制自己的图形项目,需要自己实现。 1. 实现 ondrag="onDrag(event, nodeData)" 2. onDrag(event, nodeData) { event.dataTransfer.setData('Text', JSON.stringify(nodeData.data)); } 3. nodeData数据参考: https://github.com/le5le-com/topology/blob/master/src/app/home/home.service.ts
2019/09/25 17:00
回复
举报
有github版么
2019/09/24 20:53
回复
举报
Alsmile软件作者
点击上面“官方下载”就是
2019/09/24 23:49
回复
举报
更多评论
暂无内容
发表了博客
2019/05/07 14:25

Primitive Topology

原文:Primitive Topology 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010333737/article/details/78556752   在D3D中, 顶点被存储在一个名为Vertex Buffer的数据结构中, 他是一段连续的内存, 顶点被一个挨一个的存储在这个buffer中. 但问题是这个Vertex Buffer只存储了顶点, 并没有...

0
0
发表于多媒体处理专区
2014/11/23 12:34

Topology and Geometry in OpenCascade-Topology

Topology and Geometry in OpenCascade-Topology eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说明OpenCascade中的边界表示的具体实现,即拓朴与几何的联系。对具有几何信息的拓朴结构顶点(vertex)、边(edge)、面(face)进行了详细说明。本文通过ACIS与OpenCascade进行对...

0
2
发表于云计算专区
2016/01/07 16:03

Transactional topology例子

你可以通过使用TransactionalTopologyBuilder来创建transactional topology. 下面就是一个transactional topology的定义, 它的作用是计算输入流里面的tuple的个数。这段代码来自storm-starter里面的TransactionalGlobalCount。 MemoryTransactionalSpout spout = new MemoryTransactionalSpout(DATA, new Fields("word...

0
0
发表于DevOps专区
2015/06/12 15:32

玩转CPU Topology

先温习几个概念 请原谅对部分术语笔者直接引用了wikipedia上的英文解释,因为哥实在做不到比wikipedia上更准确描述。我会试着解释部分的术语,并在本节的最后梳理一下这些术语之间的关系。注意,笔者对由于不准确的描述导致的性能下降,进程crash等任何问题不承担任何责任☺ NUMA:Non-Uniform Memory Access (NUMA) is...

0
0
发表了博客
2014/07/22 15:28

运行topology出现错误

运行topology出现错误“java.net.SocketException: Address family not supported by protocol family: connect”

1
0
发表于开发技能专区
2016/11/10 17:54

本地eclipse下开发storm的Topology

这个Topology的功能是从mysql数据库读取数据,然后将数据写入到本地文件里 使用maven创建项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0....

0
1
发表于AI & 大数据专区
2016/09/07 16:46

Storm 中Topology的并发度的理解

storm并发的设置

0
0
发表于服务端专区
2016/11/17 11:19

storm togolopy转换jstorm topology

尊重劳动成果,转载请注明出处。

0
1
发表了博客
2019/09/04 16:19

PostGIS拓扑:TOPOLOGY

数据准备:建立架构waterdataset,导入样例供水管网数据shp文件,pipesectionmain管线表,fitting节点表。 1)创建与删除拓扑 创建拓扑,CreateTopology(topo名称,坐标系srid,容差值) 示例:通过现有空间数据表(读取现有空间数据的坐标系)创建拓扑 SELECT topology.CreateTopology('topo', find_srid('waterdataset...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
29 评论
760 收藏
分享
返回顶部
顶部