&>&jtopo节点容器优化
jtopo节点容器优化
上传大小：34KB
使用jtopo的一个demo 主要是动态发现节点并排版节点 多节点连动
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
热门资源标签
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
jtopo节点容器优化
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
jtopo节点容器优化如何使用HTML5 Canvas动态的绘制拓扑图
[问题点数：80分]
本版专家分：0
结帖率 94.44%
CSDN今日推荐
本版专家分：7531
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
本版专家分：21162
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：21162
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：0
本版专家分：56
本版专家分：0
本版专家分：0
本版专家分：21162
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：70
本版专家分：0
本版专家分：0
本版专家分：21162
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
本版专家分：56
本版专家分：0
本版专家分：21162
2015年8月优秀小版主2015年5月优秀小版主2015年4月html5优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！
其他相关推荐因为工作关系，最近用到了拓扑图，找了一溜工具后，发现了这个--JTopo，纯国产而且免费
当然了如果你英文水平足够好的话。也可以看看这些英文的做拓扑图的工具，以下网站出自知乎回答：
回到JTopo上来，正JTopo首页上说的那样：给我一块'布', 我能在上面画出一个美丽的软件世界。
首先要在JSP页面中加入画布标签：&canvas&
&canvas width="800" height="500" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;"&
下面看官网上的API文档，Jtopo的核心对象有6个，分别是Stage（舞台对象），Scene（场景对象），Node（节点对象），Link（连线对象），Container（容器对象），Effect.Animate（动画效果）,下面挑每个对象值得注意的地方说一下
1.1 Mode属性：
normal[默认]
可以点击选中单个节点（按住Ctrl可以选中多个），点中空白处可以拖拽整个画面
该模式下不可以选择节点，只能拖拽整个画面
&可以框选多个节点、可以点击单个节点
在默认基础上增加了：选中节点时可以通过6个控制点来调整节点的宽、高
1.2 add/remove（scene）函数：
将一个场景加入到/移除出舞台效果
1.3 setCenter（x,y）函数：
设置舞台的中心坐标点（舞台平移）
2.1 Mode属性和Stage属性一致
2.2 alpha属性：场景的透明度
2.3 show()/hide() 函数：
表示场景的显示/隐藏
&2.4 add/remove(element)函数：
&添加对象到当前场景/移除场景中的某个元素
2.5 findElements（code）函数：
查找场景中的对象
3.1 dragable/selected/editAble/rotate属性：
&设置节点是否可以被拖动/是否被选中/是否可编辑/节点旋转的角度
3.2 setImage（url）/setBound（x,y,width,height）函数：
设置节点的图片/坐标和宽，高
NodeA/NodeZ/style.strokeColor
起始节点/终止节点/连线的颜色
两个简单的示例：
1 创建随机节点对象：
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var node = new JTopo.Node("Hello"); // 创建一个节点
node.setLocation(300, 200); // 设置节点坐标
node.rotate = Math.random(); // 旋转角度
node.scaleX = Math.random(); // 水平方向的缩放
node.scaleY = Math.random(); // 垂直方向的缩放
node.alpha = Math.random();
node.setImage('img/bg.jpg'); // 设置图片
scene.add(node); // 放入到场景中
2 各种连线：
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene(stage);
scene.background = 'img/bg.jpg';
function newNode(x, y, w, h, text){
var node = new JTopo.Node(text);
node.setLocation(x, y);
node.setSize(w, h);
scene.add(node);
// 简单连线
function newLink(nodeA, nodeZ, text, dashedPattern){
var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
link.dashedPattern = dashedP // 虚线
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.strokeColor = '0,200,255';
scene.add(link);
function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FoldLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
link.arrowsRadius = 15; //箭头大小
link.lineWidth = 3; // 线宽
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
link.dashedPattern = dashedP
scene.add(link);
// 二次折线
function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
link.arrowsRadius = 10;
link.lineWidth = 3; // 线宽
link.offsetGap = 35;
link.bundleGap = 15; // 线条之间的间隔
link.textOffsetY = 10; // 文本偏移量（向下15个像素）
link.strokeColor = '0,250,0';
link.dashedPattern = dashedP
scene.add(link);
function newCurveLink(nodeA, nodeZ, text){
var link = new JTopo.CurveLink(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
scene.add(link);
var from = newNode(100, 60, 30, 30);
var to = newNode(300, 60, 30, 30);
var link = newLink(from, to, 'Arrow', 5);
link.arrowsRadius = 10;
var from = newNode(100, 120, 30, 30);
var to = newNode(300, 120, 30, 30);
var link = newLink(from, to, 'Link');
var from = newNode(100, 200, 30, 30);
var to = newNode(200, 300, 30, 30);
var link = newFoldLink(from, to, 'FoldLink');
var link = newFoldLink(to, from,'FoldLink', 'vertical', 5);
var from = newNode(100, 300, 30, 30);
var to = newNode(200, 400, 30, 30);
var link = newFoldLink(from, to, 'FoldLink', 'vertical');
var from = newNode(450, 250, 30, 30);
var to = newNode(400, 100, 30, 30);
var link = newFlexionalLink(from, to, 'FlexLink1');
var from = newNode(600, 100, 30, 30);
var to = newNode(650, 200, 30, 30);
var link = newFlexionalLink(from, to, 'f', 'vertical', 2);
var from = newNode(450, 400, 30, 30);
var link = newLink(from, from, 'loop');
var from = newNode(550, 400, 30, 30);
var to = newNode(650, 300, 30, 30);
var link = newCurveLink(from, to, 'curve');
阅读(...) 评论()&html lang="zh"&
&title&VRRAT&/title&
&canvas id="canvas"&&/canvas&
&script src="js/jquery-1.11.0.min.js" type="text/javascript"&&/script&
&script src="js/jtopo-0.4.8-min.js" type="text/javascript"&&/script&
&script type="text/javascript"&//new JTopo.Stage(canvas); // 创建一个舞台对象 // 节点function newNode(x, y, w, h, text,path){var node = new JTopo.Node(text);if(null!=path){node.setImage(path, false);}node.setLocation(x, y);node.setSize(w, h);node.fontColor = '155,123,2';node.font = 'bold 16px 微软雅黑';scene.add(node);}// 简单连线function newLink(nodeA, nodeZ, text, dashedPattern){var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽//link.dashedPattern = dashedP // 虚线link.bundleOffset = 60; // 折线拐角处的长度link.bundleGap = 20; // 线条之间的间隔link.textOffsetY = 3; // 文本偏移量（向下3个像素）//link.strokeColor = '0,200,255';scene.add(link);}// 折线function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){var link = new JTopo.FoldLink(nodeA, nodeZ, text);link.direction = direction || 'horizontal';link.arrowsRadius = 15; //箭头大小link.lineWidth = 3; // 线宽link.bundleOffset = 60; // 折线拐角处的长度link.bundleGap = 20; // 线条之间的间隔link.textOffsetY = 3; // 文本偏移量（向下3个像素）//link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机//link.dashedPattern = dashedPscene.add(link);}// 二次折线/*function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){var link = new JTopo.FoldLink(nodeA, nodeZ, text);//FlexionalLinklink.direction = direction || 'horizontal';//horizontallink.arrowsRadius = 10;link.lineWidth = 3; // 线宽link.offsetGap = 35;link.bundleGap = 15; // 线条之间的间隔link.textOffsetY = 10; // 文本偏移量（向下15个像素）link.strokeColor = '0,250,0';link.dashedPattern = dashedP scene.add(link);}*/// 二次折线function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);link.direction = direction || 'horizontal';link.arrowsRadius = 10;link.lineWidth = 3; // 线宽link.offsetGap = 35;link.bundleGap = 15; // 线条之间的间隔link.textOffsetY = 10; // 文本偏移量（向下15个像素）link.strokeColor = '0,250,0';//link.dashedPattern = dashedP scene.add(link);}// 曲线function newCurveLink(nodeA, nodeZ, text){var link = new JTopo.CurveLink(nodeA, nodeZ, text);link.lineWidth = 3; // 线宽scene.add(link);}var json =
{war:"war",software:[{name:"Mongo",db:[{ip:"10.23.3.31",port:"80",dbName:"daf-manager"}]},{name:"Mysql",db:[{ip:"10.23.102.7",port:"80",dbName:"daf-manager"},{ip:"10.23.102.72:80",port:"80",dbName:"daf-manager"}]},{name:"Mq",db:[{ip:"10.23.102.7",port:"80",dbName:"daf-manager"},{ip:"10.23.102.72:80",port:"80",dbName:"daf-manager"},{ip:"10.23.102.7",port:"80",dbName:"daf-manager"},{ip:"10.23.102.72:80",port:"80",dbName:"daf-manager"}]},{name:"Redis",db:[{ip:"10.23.3.31",port:"80",dbName:"daf-manager"}]},{name:"Hive",db:[{ip:"10.23.3.31",port:"80",dbName:"daf-manager"}]},{name:"Hive",db:[{ip:"10.23.102.7",port:"80",dbName:"daf-manager"},{ip:"10.23.102.72:80",port:"80",dbName:"daf-manager"},{ip:"10.23.102.7",port:"80",dbName:"daf-manager"},{ip:"10.23.102.72:80",port:"80",dbName:"daf-manager"}]}]};drawFromDb(json);function drawFromDb(data){var canvas = document.getElementById('canvas');canvas.width = 1500;canvas.height = 1000;stage = new JTopo.Stage(canvas); // 创建一个舞台对象scene = new JTopo.Scene(stage); // 创建一个场景对象//scene.background = './bg4.jpg';canvas.backgroundColor = "0,255,255";var warNode_y = data.software.length/2*100;var node1 = newNode(50, warNode_y, 50, 50,data.war,"./War.png");var tempNode = newNode(node1.x+100, node1.y + 20, 10, 10," ");node1.mousedrag(function(event){
tempNode.y = node1.y +20;});tempNode.mousedrag(function(event){
node1.y = tempNode.y -20;});//建立连线var link = newLink(node1, tempNode, ' ', 2);$.each(data.software, function(i,val){var icoPic = "";if(val.name == "Mysql"){icoPic = "./Mysql.png";}else if(val.name == "Mongo"){icoPic = "./Mongo.jpg";}else if(val.name == "Mq"){icoPic = "./Mq.png";}else if(val.name == "Redis"){icoPic = "./Redis.png";}else if(val.name == "Hive"){icoPic = "./Hive.png";}//var y = tempNode.y +20 - (80 * data.child.length / 2) + i*80;//var y = tempNode.y +30 - (100 * data.child.length / 2) + i*100;var x = tempNode.x+100+(i%2)*100;var y = tempNode.y +30 - (100 * data.software.length / 2) + i*100;var a = newNode(x, y, 50, 50,val.name,icoPic);newFoldLink(tempNode, a, ' ', 'vertical', 2);if(val.db.length&1){var tempNode2 = newNode(a.x+100, a.y + 20, 10, 10," ");a.mousedrag(function(event){
tempNode2.y = a.y +20;});tempNode2.mousedrag(function(event){
a.y = tempNode2.y -20;});newLink(a, tempNode2, ' ', 2);$.each(val.db, function(i,vals){var b = new JTopo.TextNode(vals.ip+":"+vals.port+" "+vals.dbName);//var x = tempNode2.x+100+(i%2)*100;var y = tempNode2.y +2 - (20 * val.db.length / 2) + i*20;b.setLocation(tempNode2.x+100, y);b.font = 'italic bold 16px 微软雅黑';b.fontColor = "";scene.add(b);b.textPosition = 'Middle_Center';newFoldLink(tempNode2, b, ' ', 'vertical', 2);});}else{/*var textNode = new JTopo.Node("这是不是中国字")textNode.setSize(0, 0);textNode.font = 'bold 16px 微软雅黑';textNode.fontColor="0,0,0";textNode.setLocation(a.x+100, a.y + 20);textNode.textPosition = "Middle_Right";textNode.textOffsetY = -10;scene.add(textNode);*/var textNode = new JTopo.TextNode(val.db[0].ip+":"+val.db[0].port+" "+val.db[0].dbName);textNode.font = 'bold 16px 微软雅黑';textNode.fontColor = "";textNode.setLocation(a.x+100, a.y +10);scene.add(textNode);//设置文字和图标拖动textNode.mousedrag(function(event){ a.x = textNode.x-100;a.y = textNode.y-10 ;});a.mousedrag(function(event){textNode.x = a.x+100;textNode.y = a.y+10;});newFoldLink(a, textNode, ' ', 'vertical', 2);}});}
JTopo绘制网络拓扑图
JTopo绘制网络拓扑图1.因为公司项目的需要，研究下JTopo开源框架。如果对JTopo不了解的话，建议搜索下， 篇幅有限，此处不描述了。
2.为了各位不走弯路，这里描述下目前JTopo的缺点。目...
基于jtopo实现拖拽和连线
上代码：jtopoDemo.html
Jtopo 拓扑图
拓扑图的js组件，这个是免费的，网上有很多收费的当然也可以试试
拓扑图框架Jtopo
使用HTML5制作网络拓扑图的方式有主要有Canvas和SVG，Jtopo采用HTML5的Canvas实现，可以使用到Html5的平台(PC，手机，平板)，免费易用，适用于浏览器
开发流程：
Jtopo入门篇_画点画线初探
JTopo是一款强大的拓扑图形化界面开发工具，优点很多，缺点也有，最重要的这是国产（加亮，加粗，加闪光）插件，对爱国青年来说这是国家的骄傲，标志着我国打破了美帝列强的技术封锁，研发出了属于自己的拓扑插...
网络拓扑图jTopo简介和入门
传统的web版网络拓扑制作方法都是采用Flash来做的，但是这种安全性和兼容性比较差，苹果系列的产品也都不支持Flash。因此目前web版的网络拓扑图都采用HTML5的方式来制作。使用HTML5制作网...
jtopo 使用记录（更新）
jtopo 使用记录
没有更多推荐了，在拓扑图展示的界面上由于设备太多，怎么实现在点击上一级的设备图标，把下一级的隐藏了。请问有做过的吗？ 求解
发布于 2年前
原来的背景图片很好看 但是如果使用其他背景图片的话，阴影就会很难看 如何能去除阴影呢？
发布于 4年前
我发现，我如果在同一个scene里面绘制节点之后，然后需要重新绘制其它场景的时候，我发现当前的舞台场景会一直闪动不停，如果讲的不够清楚的话，欢迎大牛加一下...
发布于 2年前
@HJackS 你好，想跟你请教个问题： 您好！请教下，我们有大概1000多条有可能会更多数据想规律的展示在页面上，怎么实现呢？
我们自己做出来是蜘蛛网形状的
发布于 2年前
拓扑的功能的确很好，但是字体处理是个问题，不是太美观，字体粗细无论怎么调整都无效果，请问有什么办法？
发布于 5年前
@HJackS 你好，想跟你请教个问题：您好,您这个插件不支持win7下ie8,你能解决吗?
发布于 2年前
@HJackS 你好，想跟你请教个问题： 我最近在学习使用JTopo，确实非常快捷方便，非常感谢！ 我想试着用JTopo做一个计算机网络拓扑图，想把网络节...
发布于 2年前
@王德玉 你好，想跟你请教个问题： 为什么我在调用下面的语句的时候，元素没有被删除呢？ scene.remove(scene.selectedElemen...
发布于 5年前