第一:
解决初始化闪屏问题: 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);
}
}