For more information about Serva Software and TWaver please visit the web site at:
http://www.servasoftware.com
Or send e-mail to:
info@servasoftware.com
Nov, 2014
Notice:
This document contains proprietary information of Serva Software. Possession and use of
this document shall be strictly in accordance with a license agreement between the user
and Serva Software, and receipt or possession of this document does not convey any rights
to reproduce or disclose its contents, or to manufacture, use, or sell anything it may
describe. It may not be reproduced, disclosed, or used by others without specific written
authorization of Serva Software.
TWaver, servasoft, Serva Software and the logo are registered trademarks of Serva
Software. Java and all Java-based marks are trademarks or registered trademarks of Sun
Microsystems, Inc. in the U.S.A. and other countries. Other company, brand, or product
names are trademarks or registered trademarks of their respective holders. The
information contained in this document is subject to change without notice at the
discretion of Serva Software.
Copyright © 2014 Serva Software
LLC All Rights Reserved
2
开发指南 – TWaver HTML5 10分钟快速上手
基本概念
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页面创建了一个“两点一线”的简单图形：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<title>TWaver HTML5</title>
<script src="twaver.js"></script>
<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});
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>
</head>
<body onload="init()">
</body>
</html>
http://doc.servasoft.com/twaver-document-center/twaver-html5-guide/basic-data-element/
开发指南 – TWaver HTML5 元素
概
元素是的基本要素，用图形元，元，。TWaver HTML5中元素都twaver.Data。同的需，
了类类：twaver.Element,twaver.Alarm,twaver.Layer,分用的元，和图。中元了几种元类，用以
的元，中最常用的几类元：Node、Link、Group、SubNetwork、Grid等，TWaver中元的如下图，本
元以类的，使用以用。
基本元素(Data)
twaver.Data是TWaver HTML5中最基本的元素，了id,name,name2,icon,toolTip,parent,children等基本，支持件发和，它
twaver.Element,twaver.Alarm,twaver.Layer等类。
件发
twaver.Datatwaver.PropertyChangeDispatcher类,一个twaver.EventDispatcher例对象，使Data具发件和件的，可以
过用下面的发件器：
基本
了一基本，id,name,name2,icon,toolTip等。
Note:
name2增的,增大了label设置的。
如需要设置，可以过setClient()/getClient()设置的(对象)。
1
2
3
4
5
6
7
8
//派发属性变化事件
firePropertyChange:function(property,oldValue,newValue)
//添加属性变化监听器
addPropertyChangeListener:function(listener,scope,ahead)
//删除属性变化监听器
removePropertyChangeListener:function(listener)
//属性发生变化的处理方法
onPropertyChanged:function(listener)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
*id:网元的id,如果未设置TWaver内部会分配唯一的Id
*/
twaver.Data:function(id)
getId:function()
setName:function(value)
getName:function()
setName2:function(value)
getName2:function()
setIcon:function(value)
getIcon:function()
setToolTip:function(value)
getToolTip:function()
1 //设置Client属性;
评论1