一款可拖拽的html5人物关系图代码,可以显示预设的人物头像、人物的关系等,可以鼠标拖拽来自由排列人物顺序,可以指定不同关系的连线样式。
页面的body部分,设置好人物关系的canvas显示容器,代码如下:
<canvas width="340" height="300" id="relation"></canvas>
页面的底部,需引入jQuery库和必要的JS文件,并设置好人物关系所有的显示内容,代码如下:
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jtopo-0.4.8-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gxData={
user:{img:'img/6.png'},
other:[
{x:200,y:33,size:56,img:'img/1.png',relation:'家人',url:'#'},
{x:270,y:36,size:45,img:'img/2.png',relation:'家人',url:'#'},
{x:258,y:136,size:52,img:'img/3.png',relation:'朋友',url:'#'},
{x:232,y:245,size:44,img:'img/4.png',relation:'朋友',url:'#'},
{x:142,y:221,size:55,img:'img/5.png',relation:'朋友',url:'#'},
{x:33,y:231,size:52,img:'img/6.png',relation:'同学',url:'#'},
{x:44,y:115,size:42,img:'img/1.png',relation:'同学',url:'#'},
{x:108,y:30,size:49,img:'img/2.png',relation:'同学',url:'#'},
]
}
create(gxData);
});
function create(gxData){
var canvas = document.getElementById('relation');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
scene.backgroundColor="#000";
var userNode = new JTopo.Node(); // 创建一个节点
userNode.setBound(137, 117, 66, 66); // 同时设置大小及位置
userNode.showSelected = false; // 不显示选中矩形
userNode.setImage(gxData.user.img); // 设置图片
scene.add(userNode); // 放入到场景中
var num=gxData.other.length,jr=true,py=true,ts=true;
for(var i=0;i<num;i++){
var otherNode = new JTopo.Node(); // 创建一个节点
otherNode.setBound(gxData.other[i].x, gxData.other[i].y,gxData.other[i].size, gxData.other[i].size); // 同时设置大小及位置
otherNode.borderRadius = 50; // 圆角
otherNode.setImage(gxData.other[i].img, false); // 设置图片
otherNode.showSelected = false; // 不显示选中矩形
scene.add(otherNode); // 放入到场景中
otherNode.url=gxData.other[i].url;
otherNode.click(function(event){
window.location.href=event.target.url;
});
var link;
if(gxData.other[i].relation=="家人"){
if(jr==true){
jr=false;
link = new JTopo.Link(userNode, otherNode,gxData.other[i].relation); // 增加连线
}else{
link = new JTopo.Link(userNode, otherNode); // 增加连线
}
link.strokeColor ='235, 175, 66';
}else if(gxData.other[i].relation=="同学"){
if(ts==true){
ts=false;
link = new JTopo.Link(userNode, otherNode,gxData.other[i].relation); // 增加连线
}else{
link = new JTopo.Link(userNode, otherNode); // 增加连线
}
link.strokeColor ='242, 75, 74';
}else if(gxData.other[i].relation=="朋友"){
if(py==true){
py=false;
link = new JTopo.Link(userNode, otherNode,gxData.other[i].relation); // 增加连线
}else{
link = new JTopo.Link(userNode, otherNode); // 增加连线
}
link.strokeColor ="61, 124, 201";
}
scene.add(link);
}
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791