js绘图库raphael实例

浏览数：190 / 时间：2015年06月09日

模拟微步

<!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>