我们都知道,在界面上无论是添加元素还是干点别的不可描述的事情都需要"容器",Jtop的容器便是<canvas>标签,如下图
介绍完容器,现在来画点,虽然画点的代码只有一行,但是需要一点前戏,首先需要获取canvas对象,和生成stage对象(一个抽象的舞台对象,对应一个Canvas和多个场景对象Scene)
var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); 接着再获取 Scene场景对象,这个场景在概念上等同很多图形系统中的Layer。
var scene = new JTopo.Scene(stage); 然后添加node var node = new JTopo.Node("Hello"); node.setLocation(409, 269); scene.add(node); 到现在为止,画点的代码就已经完成,接下来画条线。画线的原理其实很简单,只要传入两个画点的node对象和线的名称即可。和由于篇幅问题(其实就是懒),就直接晒代码了。
var link = new JTopo.Link(nodeA, nodeZ, text) scene.add(link) 没错,就是这么简单,但是在真实场景中这些代码根本就没有办法应付企业级应用,在很多时候我们看到能用jtopo画出相当炫酷的场景,展现了非常复杂的业务。这个就在后面的章节进行总结。