TWaver HTML5 (2D)--基本概念

基本概念

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；

绘制图形的过程是：

1. new一个容器对象ElementBox、一个画布对象Network；
2. 把Network放置在页面中并设置大小；
3. 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,500,height:500});
      window.onresize = function(e){
               network.adjustBounds({x:0,y:0,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>

运行界面