js画图

来源：互联网发布：2017年中国经济知乎编辑：程序博客网时间：2024/05/17 08:37
无意间发现的不错的网站http://raphaeljs.com/，做流程设计器感觉还不错。下面是一个简单例子，画两个矩形，进行连接，拖动：
Html代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>线条</title>  
<script type="text/javascript" language="javascript" src="raphael.js"></script>  
<script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>  
<script type="text/javascript" language="javascript">  
    //两对象连线方法  
    Raphael.fn.connection = function (obj1, obj2, line, bg) {  
        if (obj1.line && obj1.from && obj1.to) {  
            line = obj1;  
            obj1 = line.from;  
            obj2 = line.to;  
        }  
        var bb1 = obj1.getBBox(),  
            bb2 = obj2.getBBox(),  
            p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},  
            {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},  
            {x: bb1.x - 1, y: bb1.y + bb1.height / 2},  
            {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},  
            {x: bb2.x + bb2.width / 2, y: bb2.y - 1},  
            {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},  
            {x: bb2.x - 1, y: bb2.y + bb2.height / 2},  
            {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],  
            d = {}, dis = [];  
        for (var i = 0; i < 4; i++) {  
            for (var j = 4; j < 8; j++) {  
                var dx = Math.abs(p[i].x - p[j].x),  
                    dy = Math.abs(p[i].y - p[j].y);  
                if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {  
                    dis.push(dx + dy);  
                    d[dis[dis.length - 1]] = [i, j];  
                }  
            }  
        }  
        if (dis.length == 0) {  
            var res = [0, 4];  
        } else {  
            res = d[Math.min.apply(Math, dis)];  
        }  
        var x1 = p[res[0]].x,  
            y1 = p[res[0]].y,  
            x4 = p[res[1]].x,  
            y4 = p[res[1]].y;  
        dx = Math.max(Math.abs(x1 - x4) / 2, 10);  
        dy = Math.max(Math.abs(y1 - y4) / 2, 10);  
        var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),  
            y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),  
            x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),  
            y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);  
        var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");  
        if (line && line.line) {  
            line.bg && line.bg.attr({path: path});  
            line.line.attr({path: path});  
        } else {  
            var color = typeof line == "string" ? line : "#000";  
            return {  
                bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),  
                line: this.path(path).attr({stroke: color, fill: "none"}),  
                from: obj1,  
                to: obj2  
            };  
        }  
    };  
  
    //画布  
    var paper;  
    var r_1;//矩形1  
    var r_2;//矩形2  
    var connection;//连线  
      
    var start = function () {  
        thisthis.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");  
        thisthis.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");  
    },  
    move = function (dx, dy) {  
        var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};  
        this.attr(att);  
        paper.connection(connection);  
        paper.safari();  
    },  
    up = function () {  
          
    };  
  
    //初始化方法   
    window.onload = function(){  
        paper = Raphael("canvasDiv", 659, 309);  
        r_1 = paper.rect(10, 10, 50, 50);  
        r_1.attr({fill: "#99CC33",stroke: "none"});  
        r_2 = paper.rect(140, 10, 50, 50);  
        r_2.attr({fill: "#666666",stroke: "none"});  
        //通过线连接两矩形  
        connection = paper.connection(r_1, r_2, "#000");  
        //实现拖动事件  
        r_1.drag(move, start, up);  
        r_2.drag(move, start, up);  
    }  
</script>  
<style type="text/css">  
<!--  
#canvasDiv {  
    position:absolute;  
    left:114px;  
    top:102px;  
    width:659px;  
    height:309px;  
    z-index:1;  
    background-color: #CCCCCC;  
}  
  
-->  
</style>  
</head>  
  
<body>  
<div id="canvasDiv"></div>  
</body>  
</html> 
0 1