jTopo(一)

一、jTopo是什么

jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。

jTopo关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。

使用jTopo很简单，可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系，都可以使用jTopo来进行人性化、图形化的展示。

二、基础讲解

jtopo的核心对象有Stage、Layer、Canvas、Node、Link, 关系如下图：

顶层对象（Stage）

jtopo的核心对象之间存在层级结构，最顶层的为Stage，管理一个或者多个Layer，可以对Layer进行管理：添加、移除。

提供一些常规性的交互功能，比如：鼠标缩放、视图模式变换（普通、框选、拖拽、编辑、锁定）。

显示控制：按画布居中、1：1显示导出图片等功能。

    var stage = new jtopo.Stage(“divId”);stage.show(); // 显示出来

层对象（Layer）

Layer 是一个抽象对象，默认是完全透明的，上层对象为Stage.

一个Layer下面可以有多个Node、Link对象，Node、Link对象只有放入Layer后才可能被绘制出来。

Layer 可以被平移、缩放，用户可以通过鼠标在画布上的拖拽和鼠标滚轮完成，也可以通过API来修改Layer的x、y坐标和缩放系数scaleX和scaleY实现同等效果。

一个Layer对象对应一个Canvas，多个Layer常用于画面逻辑分层，比如有的层绘制速度较慢，有的层绘制速度较快，有的层作为背景层，有的作为动画层。

    var stage = new jtopo.Stage();var layer = new jtopo.Layer(“layer-1”);stage.addChild(layer); // 放入Stage//…stage.show(); // 显示出来

节点对象（Node）

用户操作的核心两个对象Node 、Link之一。

Node给人的形象是一个矩形，有坐标（x，y）和宽高尺寸（width、heigh）。

可以指定一个文本字符串，默认显示在中矩形的下面。

Node对象的外观可以通过setStyles方法设置，核心的外观属性有：边框颜色、填充颜色、字体颜色、字体（大小、加粗等CSS Font支持的都可以）、圆角。

    var stage = new jtopo.Stage();var layer = new jtopo.Layer(“layer-1”);stage.addChild(layer); // 放入Stagevar node = new jtopo.Node(“Node-1”);layer.addChild(node); // 放入Layerstage.show(); // 显示出来

连线对象（Link）

用户操作的核心两个对象之一。

Link给人的形象是连线，有起始点和结束点，一般用来表示关系、流向等。

可以指定一个文本字符串，默认显示在连线的中间。

Link对象的外观可以通过setStyles方法设置，核心的外观属性有：颜色、线条粗细、字体颜色、字体（大小、加粗等CSS Font支持的都可以）。

    var link = new jtopo.Link('Link',fromNode,toNode);layer.addChild(link);

外观样式（Style）

var stage = new jtopo.Stage('divId');
var layer = new jtopo.Layer('default');
stage.addChild(layer);// 全局样式
layer.setStyles({// 字体，格式CSS-FONT'font': 'bold 12px 仿宋'
});var circleNode = new jtopo.CircleNode('选中样式', 400, 200, 60);// 节点样式
circleNode.setStyles({// 画笔颜色（即边框）'strokeStyle': 'red',// 画笔粗细'lineWidth': 9,// 填充颜色'fillStyle': 'orange',// 字体颜色'fontColor': 'black',// 节点中间'textPosition': 'center',// 左右居中'textAlign': 'center',// 上下居中'textBaseline': 'middle'
});// 被选中的状态样式
// 选中的样式会在绘制图元的形状之前被应用
circleNode.selectedStyle = new jtopo.Style({// 阴影颜色'shadowColor': 'orange',// 阴影的模糊级数'shadowBlur': 7,// 阴影的偏移(这里3和3表示右下方向了)'shadowOffsetX' : 3,'shadowOffsetY' : 3,// 甚至可以改变字体'font': 'bold 18px 仿宋'
});layer.addChild(circleNode);stage.show();

事件处理(鼠标交互)

jtopo封装了鼠标行为，可以在Node或者Link对象上增加事件监听，代码示例：

var stage = new jtopo.Stage('divId');
var layer = new jtopo.Layer('default');
stage.addChild(layer);var fromNode = new jtopo.Node('From', 200, 150, 40, 40);
fromNode.setImage('./demo/img/laptop.png', true);
layer.addChild(fromNode);// 鼠标点击
fromNode.on('click', function(event) {fromNode.text = 'click';console.log('click');
});// 鼠标双击
fromNode.on('dblclick', function(event) {console.log('dblclick');fromNode.text = 'dblclick';
});// 鼠标进入
fromNode.on('mouseenter', function(event) {console.log('mouseenter');fromNode.text = 'mouseenter';
});// 鼠标移动
fromNode.on('mousemove', function(event) {console.log('mousemove');fromNode.text = 'mousemove';
});// 鼠标离开
fromNode.on('mouseout', function(event) {fromNode.text = 'mouseout';console.log('mouseout');
});// 鼠标按下
fromNode.on('mousedown', function(event) {console.log('mousedown');fromNode.text = 'mousedown';
});// 鼠标松开
fromNode.on('mouseup', function(event) {console.log('mouseup');fromNode.text = 'mouseup';  
});// 鼠标拖拽
fromNode.on('mousedrag', function(event) {console.log('mousedrag');fromNode.text = 'mousedrag';
});stage.show();