基本概念
TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。
使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。
- 图元:图形中的各种基本元素,如节点(Node)、连线(Link)等;
- 容器:图元都统一放置在一个容器(DataBox)中进行管理,如同“装鸡蛋的篮子”一样。它负责图元的增/删/改/查等管理操作;
- 画布:图元最终都绘制在画布(Network)组件上。Network是最终用户看到的图形组件,负责图形画面的具体绘制和交互;
Note:以上概念是熟练使用TWaver需要掌握的最基本概念,请熟练掌握。
第一个例子
TWaver最常用的几个类:
- 图元:twaver.Node(节点)、twaver.Link(连线),都是twaver.Element图元基础类的子类;
- 容器:twaver.ElementBox,是twaver.DataBox容器类的子类;
- 画布:twaver.vector.Network;
绘制图形的过程是:
- new一个容器对象ElementBox、一个画布对象Network;
- 把Network放置在页面中并设置大小;
- new若干图元(Node、Link等)并add到Box容器中;
下面的HTML页面创建了一个“两点一线”的简单图形:
<script>
$(function init(){
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
document.body.appendChild(network.getView());
network.adjustBounds({x:0,y:0,width:500,height:500});
window.onresize = function(e){
network.adjustBounds({x:0,y:0,width:document.documentElement.clientWidth,height:document.documentElement.clientHeight});
};
var node1 = new twaver.Node();
node1.setName("TWaver");
node1.setLocation(100,100);
box.add(node1);
var node2 = new twaver.Node();
node2.setName("HTML5");
node2.setLocation(300,200);
box.add(node2);
var link = new twaver.Link(node1,node2);
link.setName("Hello!");
link.setToolTip('<b>Hello!</b>');
box.add(link);
});
</script>
运行界面