模拟微步
<!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>
时间： 2024-10-29 22:01:47