html5图形库fabric.js实现二叉树
来源：互联网 发布：哈利波特 魔杖 知乎 编辑：程序博客网 时间：2024/06/11 04:24
html5图形库fabric.js实现二叉树
<!DOCTYPE html><html lang="en" ng-app=""> <head> <meta charset="utf-8"> <title>node</title> <style> body {position:absolute; } pre { margin-left: 15px !important } #pop{ position:absolute; left:0px; top :0px; width:200px; height:280px; border-radius:10px; border:solid 5px #333; padding:10px; font-size:10px; background:#999; overflow:hidden; display:none; z-index:100; } table{ width:100%; height:100%; } table tr td:nth-child(1){ width:50%; } table tr td:nth-child(2){ font-weight:bold; color:#F00; } b { color:#F00 ; } </style> <script src="fabric.js"></script> </head> <body> <canvas id="c" width="3440" height="800" style="border:1px solid #ccc"></canvas> <div id="pop"> <table> <tr> <td>res_no:</td> <td><span id="p1"></span></td> </tr> <tr> <td>res_type:</td> <td><span id="p2"></span></td> </tr> <tr> <td>parent_element:</td> <td><span id="p3"></span></td> </tr> <tr> <td>left_p:</td> <td><span id="p4"></span></td> </tr> <tr> <td>rigth_p:</td> <td><span id="p5"></span></td> </tr> <tr> <td>left_s:</td> <td><span id="p6"></span></td> </tr> <tr> <td>right_s:</td> <td><span id="p7"></span></td> </tr> <tr> <td>child_s:</td> <td><span id="p8"></span></td> </tr> <tr> <td>bmlm_base:</td> <td><span id="p9"></span></td> </tr> <tr> <td>level:</td> <td><span id="p10"></span></td> </tr> </table> </div><script id="main">(function (){ var canvas = this.__canvas = new fabric.canvas('c', { selection: false }), mouseX ,mouseY; //鼠标位置 canvas.isDrawingMode = false; fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; //fabric.Object.prototype.originX = 1920; //fabric.Object.prototype.originY = 100; var res_no = {}; var nodeArr = [ //第一层 { res_no : 1001, //资源号res_type:'S', //资源类型parent_element:null,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:null ,selfId :1 },//第二层{ res_no : 1002, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:1,selfId :2,},//第二层 { res_no : 1003, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:1,selfId :3 },//第三层 { res_no : 1004, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:2,selfId :4},//第三层 { res_no : 1005, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:2,selfId :5} ,//第三层{ res_no : 1006, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:3,selfId :6} ,//第三层{ res_no : 1007, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:3,selfId :7} ,//第四层{ res_no : 1008, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:4,selfId :8} ,{ res_no : 1009, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:4,selfId :9} ,{ res_no : 1010, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:6,selfId :10} ,{ res_no : 1011, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:7,selfId :11} ,//第五层{ res_no : 1012, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:9,selfId :12} ,{res_no : 1013, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:9,selfId :13} ,{res_no : 1014, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:11,selfId :14} ,{ res_no : 1015, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:11,selfId :15} ,{ res_no : 1016, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:14,selfId :16} ,{ res_no : 1017, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:14,selfId :17} ,{ res_no : 1018, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:15,selfId :18} ,{ res_no : 1019, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:15,selfId :19} ,{ res_no : 1020, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:16,selfId :20} ,{ res_no : 1021, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:16,selfId :21} ,{ res_no : 1022, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:17,selfId :22} ,{ res_no : 1023, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:17,selfId :23} ,{ res_no : 1024, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:18,selfId :24} ,{ res_no : 1025, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:18,selfId :25} ,{ res_no : 1026, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:19,selfId :26} ,{ res_no : 1027, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:19,selfId :27} ,{ res_no : 1028, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:7,selfId :28} ,{ res_no : 1029, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:28,selfId :29} ,{ res_no : 1030, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:28,selfId :30} ,{ res_no : 1031, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:29,selfId :31} ,{ res_no : 1032, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:30,selfId :33} ,{ res_no : 1033, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:30,selfId :34} ,{ res_no : 1034, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:29,selfId :32} ,{ res_no : 1035, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:31,selfId :35} ,{ res_no : 1036, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:31,selfId :36} ,{ res_no : 1037, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:20,selfId :37} ,{ res_no : 1038, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:20,selfId :38} , { res_no : 1039, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:21,selfId :39} ,{ res_no : 1040, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:21,selfId :40} , { res_no : 1041, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:22,selfId :41} ,{ res_no : 1042, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:22,selfId :42} ,{ res_no : 1043, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:27,selfId :43} ,{ res_no : 1044, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:27,selfId :44} ,{ res_no : 1045, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:35,selfId :45} ,{ res_no : 1046, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:6,selfId :46} ,{ res_no : 1047, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:10,selfId :47} ,{ res_no : 1048, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:10,selfId :48} ,{ res_no : 1049, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:47,selfId :49} ,{ res_no : 1050, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:49,selfId :50} ,{ res_no : 1051, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:49,selfId :51} ,{ res_no : 1052, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:50,selfId :52} ,{ res_no : 1053, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:46,selfId :53} ,{ res_no : 1054, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:46,selfId :54} ,{ res_no : 1055, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:54,selfId :55} ,{ res_no : 1056, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:54,selfId :56} ,{ res_no : 1057, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:56,selfId :57} ,{ res_no : 1058, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:56,selfId :58} ,{ res_no : 1059, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:58,selfId :59} ,{ res_no : 1060, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:58,selfId :60} ,{ res_no : 1061, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:34,selfId :61} ,{ res_no : 1062, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:34,selfId :62} ,{ res_no : 1063, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:62,selfId :63} ,{ res_no : 1064, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:62,selfId :64} ,{ res_no : 1065, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:23,selfId :65} ,{ res_no : 1066, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:23,selfId :66} ,{ res_no : 1067, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:24,selfId :67} ,{ res_no : 1068, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:24,selfId :68} ,{ res_no : 1069, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:8,selfId :69} ,{ res_no : 1070, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:69,selfId :70} ,{ res_no : 1071, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:70,selfId :71} ,{ res_no : 1072, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:71,selfId :72} ,{ res_no : 1073, //资源号res_type:'S', //资源类型parent_element:res_no,//父元素left_p:0, //左边积分数rigth_p:0, //右边积分数left_s:0, //左边点个数right_s:0, //右边点个数child_s:0, //子节点个数bmlm_base:0, //再增值产考基数level:1, //展现的层数parentId:71,selfId :73} ,] ; //设置鼠标位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = function(ev){ var mousePos = mousePosition(ev); mouseX = mousePos.x; mouseY = mousePos.y;//console.log(mouseX +' | '+mouseY); }; var createNode = function(nodeObj){ //console.log(nodeObj.index)var node = new fabric.Circle({ left: nodeObj.x , top: nodeObj.y , strokeWidth: 0 , radius: 10 , fill: '#666' , stroke: '#666'}) ; node.hasControls = node.hasBorders = false;node.lockMovementY = node.lockMovementX = true;node.hoverCursor = "pointer";//节点信息node.res_no = nodeObj.res_no; //资源号node.res_type=nodeObj.res_type; //资源类型node.parent_element=nodeObj.parent_element;//父元素node.left_p=nodeObj.left_p ; //左边积分数node.rigth_p=nodeObj.rigth_p ; //右边积分数node.left_s=nodeObj.left_s ; //左边点个数node.right_s=nodeObj.right_s ; //右边点个数node.child_s=nodeObj.child_s ; //子节点个数node.bmlm_base=nodeObj.bmlm_base ; //再增值产考基数node.level=nodeObj.level ; //展现的层数node.parentId=nodeObj.parentId ;node.selfId =nodeObj.selfId ;node.leftId =nodeObj.leftId ;node.rightId =nodeObj.rightId ;node.on('mouseover',function(){//判断弹出框是否超过浏览器最底端var posX =this.left ,posY=this.top ;//console.log( mouseY +' - '+ this.top); (document.body.clientWidth - mouseX < 228) && (posX = mouseX -300) ; (document.body.clientHeight - mouseY < 320) && (posY = this.top -(300-document.body.clientHeight + mouseY)) ;var x = posX ,y = posY ,div = document.getElementById('pop'),p1 = document.getElementById('p1'),p2 = document.getElementById('p2'),p3 = document.getElementById('p3'),p4 = document.getElementById('p4'),p5 = document.getElementById('p5'),p6 = document.getElementById('p6'),p7 = document.getElementById('p7'); div.style.display = "block";div.style.top = y+'px' ;div.style.left= (x+20)+'px' ;p1.innerHTML = this.res_no ;p2.innerHTML = this.res_type;p3.innerHTML = '';p4.innerHTML = this.left_p;p5.innerHTML = this.rigth_p;p6.innerHTML = this.left_s;p7.innerHTML = this.right_s;p8.innerHTML = this.child_s;p9.innerHTML = this.bmlm_base;p10.innerHTML = this.level;});/*node.on('mouseout',function(){var div = document.getElementById('pop');div.style.display = "none";});*/node.on('object:dblclick',function(){nodeArr.forEach(function(nodeObj){nodeObj.leftId = null;nodeObj.rightId = null;nodeObj.currLevel= null;});//nodeArr[i].leftId = nodeArr[i].rightId = null ;for(var i=0 ;i<nodeArr.length ;i++){if (nodeArr[i].selfId == this.selfId ){ //debuggercanvas.clear();nodeArr[i].x = 1720;nodeArr[i].y = 50 ;nodeArr[i].currLevel = 1; createNode(nodeArr[i]);drawNode(nodeArr[i]);break;}}//drawNode();}); //return node;//console.log(node.selfId)var text = new fabric.Text(""+node.selfId, { left: nodeObj.x, top: nodeObj.y + 2 ,fill: '#fff' ,fontSize:10 });text.hasControls = text.hasBorders = false;text.lockMovementY = text.lockMovementX = true;text.hoverCursor = "pointer"; canvas.add( node ); }; function windowTocanvas(canvas, x, y) {var bbox = canvas.getBoundingClientRect();return { x: x - bbox.left * (canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height)}; } var posOffset = [ //[640,150],//[320,120],//[160,100],//[80 ,80 ],//[40 ,50 ][0,0],[832,160],[416,120],[208 ,100 ],[104 ,90 ] ,[52 ,80 ] ,[26 ,70] ,[13 ,50] ] ; function drawNode(node){ var selfFn = arguments.callee; if ( node ) { var nodeLeft = null ,nodeRight = null ;//取当前对象的左，右子对象for(var i = 0 ; i< nodeArr.length ;i++ ){ if ( nodeArr[i].parentId == node.selfId && node.leftId ==null ){//设置此节点对应的左子对象Idnode.leftId = nodeArr[i].selfId;//设置节点当前层数nodeArr[i].currLevel = node.currLevel+ 1 ;//设置节点坐标nodeArr[i].x = node.x - posOffset[node.currLevel][0] ;nodeArr[i].y = node.y + posOffset[node.currLevel][1] ;nodeLeft = nodeArr[i] ;//console.log('left:'+i); //画节点间连线var line = drawLine([node.x,node.y,nodeLeft.x,nodeLeft.y]);canvas.add(line);//创建节点createNode(nodeLeft) } else if (nodeArr[i].parentId == node.selfId && node.rightId==null ){//设置此节点对应的右子对象Idnode.rightId = nodeArr[i].selfId;//设置节点当前层数nodeArr[i].currLevel = node.currLevel+ 1;//设置节点坐标nodeArr[i].x = node.x + posOffset[node.currLevel][0] ;nodeArr[i].y = node.y + posOffset[node.currLevel][1] ; nodeRight = nodeArr[i] ;//console.log('right:'+i); //画节点间连线var line = drawLine([node.x,node.y,nodeRight.x,nodeRight.y]);canvas.add(line);//创建节点createNode(nodeRight) }}//判断当前对象是否有左，右子对象if (nodeLeft ) {drawNode(nodeLeft)};if (nodeRight) {drawNode(nodeRight)};} else {//第一层 for(var i = 0 ; i< nodeArr.length ;i++){if ( nodeArr[i].parentId == null ){//console.log('parentId:'+nodeArr[i].parentId)//从原数据对象删除第一层对象//var newNode = nodeArr.slice(i,i+1);nodeArr[i].x = 1720;nodeArr[i].y = 50;nodeArr[i].currLevel = 1;//创建节点createNode(nodeArr[i]);selfFn(nodeArr[i]) ;break; }}} } function drawLine(coords){ //console.log(coords) //画节点之间的连线 var line = new fabric.Line(coords, { fill: 'red', stroke: 'red', strokeWidth: 3, selectable: false, globalCompositeOperation:'destination-over' }); return line; } canvas.on('mouse:down',function(){ var div = document.getElementById('pop') ; div.style.display = 'none'; }); //绘制所有的节点 drawNode(); /* //console.dir(nodeArr); canvas.on('mouse:over', function(e) { if (e.target.radius ){var x = e.target.left,y = e.target.top ,div = document.getElementById('pop'),p1 = document.getElementById('p1'),p2 = document.getElementById('p2'),p3 = document.getElementById('p3'),p4 = document.getElementById('p4'),p5 = document.getElementById('p5'),p6 = document.getElementById('p6'),p7 = document.getElementById('p7'); div.style.display = "block";div.style.top = y+'px' ;div.style.left= (x+20)+'px' ;p1.innerHTML = e.target.res_no ;p2.innerHTML = e.target.res_type;p3.innerHTML = '';p4.innerHTML = e.target.left_p;p5.innerHTML = e.target.rigth_p;p6.innerHTML = e.target.left_s;p7.innerHTML = e.target.right_s;p8.innerHTML = e.target.child_s;p9.innerHTML = e.target.bmlm_base;p10.innerHTML = e.target.level;} }).on('mouse:out', function(e) { return if (e.target.radius){var x = e.target.left,y = e.target.top ,div = document.getElementById('pop');div.style.display = "none";} });*/ })() ;</script></body></html>
0 0
- html5图形库fabric.js实现二叉树
- 前端fabric.js实现二叉树可视化布局
- html5运用js绘制图形
- Fabric.js
- JS实现平衡二叉树
- JS实现二叉搜索树
- js实现二叉树遍历
- JS实现重建二叉树
- JS实现二叉搜索树
- JS实现SVG图形
- 利用PHP实现二叉树的图形显示
- HTML5+JS实现俄罗斯方块
- Html5+js实现俄罗斯方块
- HTML5 canvas图形库 RGraph
- Fabric.js的学习
- Fabric.js学习笔记
- 二叉树的简单实现 JS
- js二叉树的实现练手
- Android WebView总结
- Android 系统应用调用，intent 的使用方法总结
- Unity Mecanim 总结
- CArray和CTypedPtrList的使用初步
- Spring入门简单总结
- html5图形库fabric.js实现二叉树
- UIView设置指定的border
- Objective-C与Java类的一些区别
- Linux命令之pr
- jsp 校验数字 保留两位小数 不能输入汉字
- Adb shell 之 input 命令
- jmeter学习 六
- ubuntu14.04 l LTS 修改字体大小以及格式
- C++新手常见低级错误
