jTopo(一)

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); // 放入Stage

    var node = new jtopo.Node(“Node-1”);
    layer.addChild(node); // 放入Layer

    stage.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();

ole.log(‘mouseup’);
fromNode.text = ‘mouseup’;
});

// 鼠标拖拽
fromNode.on(‘mousedrag’, function(event) {
console.log(‘mousedrag’);
fromNode.text = ‘mousedrag’;
});

stage.show();