Jtopo总结

第一：

解决初始化闪屏问题：                                         stage.clear();//清空舞台对象
                    var tmp = $("#i_jtopo").clone();//把当前面板存起来
         $("#i_jtopo").remove();//移除
         $('body').prepend(tmp);//将临时存的变量再放入页面  避免闪屏

要写jtopo 先参考官方文档

   http://www.jtopo.com/

下面是的在js内封装的方法，用来调用使用的

   //初始化面板
   function loadJTOPO(canvas){
       var dome=$("#dialogBox").html();
       //初始化一个面板
   rightCurrentClick=function rightCurrentClick(node){  
   }; //右键点击时候弹出框元素
   rightCurrentClickDome=function rightCurrentClickDome(dome){return dome;}; //右键点击时候弹出框节点元素
   var JTOPO={
    "stage":null,"scene":null,"rightCurrentClick":rightCurrentClick,"rightCurrentClickDome":rightCurrentClickDome
   }
   stage= new JTopo.Stage(canvas);
   scene= new JTopo.Scene(stage);
   stage.cursor = "url(./img/cur/closedhand.cur) 8 8, default"; // 拖动鼠标图形设置
   JTOPO.stage = stage ;
   JTOPO.scene = scene;
stage.mode = "normal"; //设置舞台模式normal[默认]：可以点击选中单个节点（按住Ctrl可以选中多个），点中空白处可以拖拽整个画   drag: 该模式下不可以选择节点，只能拖拽整个画面 select: 可以框选多个节点、可以点击单个节点 edit: 在默认基础上增加了：选中节点时可以通过6个控制点来调整节点的宽、高  
stage.frames = 24; //可以为0，表示：不自动绘制，由用户手工调用Stage对象的paint()方法来触发。如果小于0意味着：只有键盘、鼠标有动作时才会重绘，例如：stage.frames = -24。
stage.eagleEye.visible = true //显示鹰眼
stage.wheelZoom = 0.75; //缩放比例为0.85
scene.alpha=0;//设置场景对象透明度
   scene.background = './img/bg.png';
stage.addEventListener("click", function(event){
});
return JTOPO;
  }
    var currentNode=null;
  //创建节点
 function  addNode(x, y, w, h, text){
           var node = new JTopo.Node(text);
           node.setLocation(x, y);
           node.setSize(w, h);
           node.font = '14px 微软雅黑'; // 字体
           node.textPosition = "Top_Center";
           node.borderRadius=5;// 圆角
           node.borderWidth = 0; // 边框的宽度
           //node.borderColor= '0, 0, 255';//边框颜色
           node.alpha=10;//透明度
           node.shadow = "true";//是否显示阴影
           node.zIndex ="10";//大的覆盖小的,范围 [10-999]，10以下保留占用
           node.nextclick='';
           node.lastclick='';
           node.dcclick='';
           node.islink='';
           node.roomid='';
           node.havelink='0';
           node.dtype='';
           //node.setImage('./img/wy.jpg', true);
           //node.layout = {type: 'circle', radius: 150};
           node.showSelected = true; //显示矩形
node.mousedown(function(event){//鼠标按下事件
currentNode=this;
if(event.button == 2){
getdialogBox(currentNode);//控制弹框函数
            } 
        });
   node.click(function(){
    currentNode=this;
    changenextLink(currentNode);
   }) ;
/* node.dbclick(function(){//双击事件
currentNode=this;
dcclickNode(currentNode);
}) ; */
           scene.add(node);
           return node;
    } 
 //弹出对话框
// currentNode.nextclick='nextno';
 var currentLink=null;
 function getdialogBox(currentNode){
   var  bodywidth=document.body.clientWidth ;
   var   bodyheight=document.body.clientHeight ;
        var top=event.pageY-40;
        var left=event.pageX;
        if(bodywidth-left>140){
        }else{
        left=(bodywidth-140);
        }
        if(bodyheight-top>240){
        }else{
        top=bodyheight-300;
        }
       
               $("#dialogBox").css({
                    marginTop: top,
                    marginLeft: left
                }).fadeIn();  
               $("#dialogbox_a").mouseleave(function (){
              $("#dialogBox").fadeOut(1000);  
     });
 }
 //弹出线的对话框
 function getlinkdialogBox(currentLink){
 //alert(currentLink.text+"==="+currentLink.name);
 //if(currentLink.name=="open"){
 var top=event.pageY-40;
      var left=event.pageX;
            $("#dialogBoxlink").css({
                 marginTop: top,
                 marginLeft: left
             }).fadeIn();  
            $("#dialogbox_link").mouseleave(function (){
            $("#dialogBoxlink").fadeOut(1000);  
 });
 //} 
 }
     //创建连线
 function newLink(nodeA, nodeZ, text,dashedPattern){ 
       var link = new JTopo.Link(nodeA, nodeZ, text);    
       link.font = '18px 微软雅黑'; // 字体
       link.lineWidth = 4; // 线宽
       link.bundleOffset = 0; // 折线拐角处的长度
       link.bundleGap = 20; // 线条之间的间隔
       link.textOffsetY = 3; // 文本偏移量（向下3个像素）153,51,0
       link.name='';
       link.cirid='';
       link.mark='';
       link.havelinks='1';
       //link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
       link.strokeColor = '0,255,51';
       link.dashedPattern = dashedPattern; 
      /* link.dbclick(function(event){//线条的双击事件
        currentLink=this;
        if(event.button == 0){
        getroute(currentLink);//控制弹框函数
        }
}) ;
       link.click(function(event){//鼠标点击事件
        currentLink=this;
       showAllLink(currentLink,currentLink.nodeA,currentLink.nodeZ,currentLink.text);
        });*/
       link.mousedown(function(event){//鼠标按下事件
        currentLink=this;
if(event.button == 2){
getlinkdialogBox(currentLink);//控制弹框函数
            } 
        });
       scene.add(link);
       return link;
      }    
   //两个节点重力效果展示
   function gravityEffect(fromNode,fromNode1){
    var effect = JTopo.Effect.spring({
               grivity: 10 // 引力 (可以为负值)
           })
           // 效果作用对象(node节点以targetNode为目标，产生弹性效果)
      effect.addNode(fromNode, fromNode1);
      effect.play();  
   }
   //多加点动画效果
   function  nodeEffect(node1,node2){
            var effect = JTopo.Effect.spring({
                minLength: 200 // 节点之间最短距离
            });
                effect.addNode(node1, node2);
            // 播放
            effect.play();
   }
   //圆形节点
   function addcircleNode(x, y, w, h, text){
   var circleNode = new JTopo.CircleNode('node');
       circleNode.radius = w; // 半径
           circleNode.alpha = 0.7;
           circleNode.fillColor = '0, 0, 255'; // 填充颜色
           circleNode.setLocation(x, y);
           circleNode.textPosition = 'Middle_Center'; // 文本位置
   circleNode.mousedown(function(event){//鼠标按下事件
if(event.button == 2){
var dome=$("#dialogBox").html();
    dialogBox(event,dome);
            }
        });
       var currentNode=null;
circleNode.dbclick(function(){//双击事件
//findLower(currentNode.id,currentNode.text)
}) ;
           scene.add(circleNode);
           //return circleNode;
   } 
       function createcontainer(width,height,text){
          var container = new JTopo.Container(text);
          var node = addNode(width, height+150, 0, 0, '');
node.borderWidth = 0; // 边框的宽度
node.borderRadius=0;// 圆角
scene.add(node);
    container.add(node);
    var node1 = addNode(width+600, height, 0, 0, '');
node1.borderWidth = 0; // 边框的宽度
node1.borderRadius=0;// 圆角
scene.add(node1);
    container.add(node1);
    container.textPosition = 'Middle_Center';
    container.font = '50pt 微软雅黑';
    container.fontColor = '128,128,128';
container.fillColor= '220,220,220';
container.setLocation(width, height);
scene.add(container);
return container;
       }
     //加载中打开
       function openLoading(){
      //alert("****");
        try{
        $("body").addClass("noScorll");
        $("#loading").fadeIn(200);
        }catch(e){
        console.log("加载中打开异常，可能没有对应元素"+e);
        }
       }
       //加载中关闭
       function closeLoading(){
        try{
        $("body").removeClass("noScorll");
        $("#loading").fadeOut(200);
        }catch(e){
        console.log("加载中关闭异常"+e);
        }
       }