目前web画图功能都是基于canvas或svg实现。最近需要实现一个拓扑图功能，所以对这方面了解并记录下来。

常见开源画图工具

GoJS :基于canvas的作图工具，api丰富文档详细是一款不错的开发工具
Raphaël：基于svg的作图工具，文档还是比较详细，在github上表现不错
le5le：一款国产的开源工具，整体来说还是不错的

Jtopo开发工具

Jtopo是一款完全免费的拓扑图形化界面开发工具

优点：简单好用，基于几个核心类，可以扩展出丰富的功能

缺点：文档不够详细，只能通过demo了解使用；对于一些样式自定义一般，如：选中的样式、告警等；工具只能通过script标签方式引入项目

Jtopo 使用

在官网下载最新压缩包
实现demo

<script src="./jtopo-0.4.8-min.js"></script>

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById('canvas'); 
  var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
  var scene = new JTopo.Scene(stage); // 创建一个场景对象
  scene.backgroundColor = '0, 0, 0'
  scene.background = 'http://www.jtopo.com/demo/img/bg.jpg'

  var node = new JTopo.Node("Hello");    // 创建一个节点
  node.setLocation(100, 50);    // 设置节点坐标                    
  scene.add(node); // 放入到场景中

  var circle = new JTopo.CircleNode("circle");    // 创建一个圆形节点
  circle.setLocation(400, 200);    // 设置节点坐标                    
  scene.add(circle); // 放入到场景中

  var link = new JTopo.FlexionalLink(node, circle, '二次折线'); // 创建一个二次折线
  link.direction = 'vertical'; // 连线方式水平 （垂直：horizontal）
  link.arrowsRadius = 10; // 箭头
  link.lineWidth = 3; // 线宽
  link.offsetGap = 35;
  link.bundleOffset = 100; // 折线拐角处的长度
  link.bundleGap = 15; // 线条之间的间隔
  link.textOffsetY = 10; // 文本偏移量（向下15个像素）
  link.strokeColor = '255,255,0';
  link.dashedPattern = 10;  // 虚线(数字表示虚线间隔)
  scene.add(link);
</script>

常见问题

canvas自适应
- canvas 只能通过设置属性 width 和 height来控制宽高，不可以在style中设置宽度高度，这样会将整个 canvas 拉伸。
解决方案：在 canvas 外套一个div，可以通过监听外出div变化给 canvas 的width 和 height 属性赋值的方式实现canvas自适应。
场景背景问题
- 场景是通过 backgroundColor 属性来添加背景色，background 属性来添加背景图。但是backgroundColor 常常无效并且不使用 background 属性常常又会出现莫名错误。
解决方案：背景色可以通过设置 canvas 的 css 样式实现；如果不用背景图也要写上 scene.background = '' 的属性，避免出现报错问题

jTopo 使用记录

常见开源画图工具

Jtopo开发工具

Jtopo 使用

常见问题