标签：
模拟微步
<!DOCTYPE html> <html> <head> <style type="text/css"> body { text-align: center; } #canvas { background-color: pink; margin: 0 auto; width: 80%; height: 100px; } </style> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript"> var canvas = null; var paper = null; var nodes = []; var links = []; var col_width = 100; var row_height = 100; var node_count = 100; window.onload = function() { canvas = document.getElementById(‘canvas‘); paper = Raphael(‘canvas‘); initNodes(); initLinks(); func1(); }; window.onresize = function() { func1(); }; function initNodes() { for (var i = 0; i < node_count; i++) { var node = {}; node.shape = paper.circle(50, 50, 20, 20); node.text = paper.text(50, 50, i); nodes.push(node); } } function initLinks() { for (var i = 0; i < nodes.length; i++) { if (i == nodes.length - 1) break; var n = nodes[i]; var n1 = nodes[i+1]; var path = [ ["M", n.shape.attr("cx"), n.shape.attr("cy")], ["L", n1.shape.attr("cx"), n1.shape.attr("cy")] ]; links.push(paper.path(path).attr({stroke: "green", "stroke-width": 2})); } } function setNodes() { for (var i = 0; i < nodes.length; i++) { var n = nodes[i]; //n.shape.translate(i*50, 50); //n.text.translate(i*50, 50); n.shape.attr({cx: i*50, cy: 50}); n.text.attr({x: i*50, y: 50}); } } function setLinks() { for (var i = 0; i < nodes.length; i++) { if (i == nodes.length - 1) break; var n = nodes[i]; var n1 = nodes[i+1]; var path = [ ["M", n.shape.attr("cx"), n.shape.attr("cy")], ["L", n1.shape.attr("cx"), n1.shape.attr("cy")] ]; links[i].attr({path: path}); } } function func1() { var canvas_width = canvas.offsetWidth; var row_node_count = parseInt(canvas_width / col_width); var row_count = parseInt(node_count / row_node_count) + 1; var canvas_height = row_height * row_count; //alert(canvas_width); canvas.style.height = canvas_height + ‘px‘; paper.setSize(canvas_width, canvas_height); //paper.clear(); //paper.rect(10, 10, canvas_width-40, canvas_height-20); var k = 0; for (var i = 0; i < row_count; i++) { if (i % 2 == 0) { for (var j = 0; j < row_node_count; j++) { if (k == node_count) break; nodes[k].shape.attr({cx: j*col_width + col_width/2, cy: i*row_height + row_height/2}); nodes[k].text.attr({x: j*col_width + col_width/2, y: i*row_height + row_height/2}); k++; } } else { for (var j = row_node_count-1; j >= 0; j--) { if (k == node_count) break; nodes[k].shape.attr({cx: j*col_width + col_width/2, cy: i*row_height + row_height/2}); nodes[k].text.attr({x: j*col_width + col_width/2, y: i*row_height + row_height/2}); k++; } } } setLinks(); } </script> </head> <body> <div id="canvas"> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/feilv/p/4503951.html
