应客户需求写个Demo,Demo中包含一些常用的功能,包括解析JSON数据生成TWaver中的网元和连线,网元右下角带上不同标识的小图标,连线需要是二次曲线,弹出菜单和信息板,跟大家分享下。先上图让大家看看效果(大家在学习的同时,能否发现这次Demo有所不同)
解析JSON数据生成TWaver中的网元和连线
下面是Demo中用到的JSON数据格式样例
2 |
{
"element" : "node" , "name" : "网关" , "id" : "gateway1" , "image" : "group" , "icon" : "icon_wall" }, |
3 |
{
"element" : "node" , "name" : "网关" , "id" : "gateway2" , "image" : "subnetwork" , "icon" : "icon_wall" }, |
4 |
{
"element" : "link" , "from" : "cloud" , "to" : "center1" , "name" : "包含关系" }, |
5 |
{
"element" : "link" , "from" : "gather2" , "to" : "firewall" , "arrow" : "11" } |
根据element判断创建何种对象,是网元还是连线;image设置网元图片的名称(这些图片都是事先需要注册,如果使用TWaver内置的图片,则不需要,直接使用TWaver的图片注册名称即可,例如twaver.Defaults.IMAGE_GROUP),icon设置网元上的标识,arrow设置连线的箭头方向,下面上代码
1 |
function createElement(item){
|
3 |
if (item.element == 'link' ){
|
4 |
var from = this .box.getDataById(item.from); |
5 |
var to = this .box.getDataById(item.to); |
6 |
var link = new MyLink(from, to); |