使用Raphael繪制流程圖，自繪動態箭頭，可拖動，有雙擊事件，純前端，兼容各種瀏覽器

本文轉載自查看原文 2012-05-18 11:17 23886 javascript/jQuery/ExtJs

關於Raphaël

Raphaël是一個在網頁上繪圖的js類庫，非常小壓縮版只有89k左右

官方宣稱兼容各種主流瀏覽器，據筆者測試在IE6下尚有一些問題（不過這些與本文無關）

他是使用js來創建vml或svg來繪圖的

緣起

項目中不能使用Silverlight或者flash來解決繪圖和拖動的問題

而且為了項目效果較好，要求拖動的時候箭頭能動態改變起點和重點，別且箭頭要改變方向

所以只能考慮JS了

效果

演示

http://www.mrlh.net/flowchart/demo.htm[已經不能訪問了]

源碼

引用

    <script language="javascript" type="text/javascript" src="raphael.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>

這兩個東西是不相干的，引用先后順序也無所謂

頁面加載完成后的代碼

        $(function () {
            //用來存儲節點的順序
            var connections = [];
            //拖動節點開始時的事件
            var dragger = function () {
                this.ox = this.attr("x");
                this.oy = this.attr("y");
                this.animate({ "fill-opacity": .2 }, 500);
            };
            //拖動事件
            var move = function (dx, dy) {
                var att = { x: this.ox + dx, y: this.oy + dy };
                this.attr(att);
                $("#test" + this.id).offset({ top: this.oy + dy + 10, left: this.ox + dx + 10 });
                for (var i = connections.length; i--; ) {
                    r.drawArr(connections[i]);
                }
            };
            //拖動結束后的事件
            var up = function () {
                this.animate({ "fill-opacity": 0 }, 500);
            };
            //創建繪圖對象
            var r = Raphael("holder", $(window).width(), $(window).height());
            //繪制節點
            var shapes = [
                        r.rect(190, 100, 60, 40, 4),
                        r.rect(290, 80, 60, 40, 4),
                        r.rect(290, 180, 60, 40, 4),
                        r.rect(450, 100, 60, 40, 4)
                     ];
            //定位節點上的文字
            $("#test1").offset({ top: 100 + 10, left: 190 + 10 });
            $("#test2").offset({ top: 80 + 10, left: 290 + 10 });
            $("#test3").offset({ top: 180 + 10, left: 290 + 10 });
            $("#test4").offset({ top: 100 + 10, left: 450 + 10 });
            //為節點添加樣式和事件，並且繪制節點之間的箭頭
            for (var i = 0, ii = shapes.length; i < ii; i++) {
                var color = Raphael.getColor();
                shapes[i].attr({ fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move" });
                shapes[i].id = i + 1;
                shapes[i].drag(move, dragger, up);
                shapes[i].dblclick(function () { alert(this.id) })
            }
            //存儲節點間的順序
            connections.push(r.drawArr({ obj1: shapes[0], obj2: shapes[1] }));
            connections.push(r.drawArr({ obj1: shapes[1], obj2: shapes[2] }));
            connections.push(r.drawArr({ obj1: shapes[2], obj2: shapes[3] }));
        });

這些代碼注釋比較詳細，就不多說了

在這些代碼中涉及到操作的界面元素HTML代碼如下

<body>
    <div id="holder">
    </div>
    <div id="test1" class="test">
        測試1</div>
    <div id="test2" class="test">
        測試2</div>
    <div id="test3" class="test">
        測試3</div>
    <div id="test4" class="test">
        測試4</div>
</body>

其中關鍵元素的樣式如下

        #holder
        {
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            position: absolute;
            z-index: 999;
        }
        test
        {
            position: absolute;
            width: 80px;
            height: 30px;
            top: 0px;
            z-index: 0;
        }

在拖動事件中，動態改變了節點文本元素的位置

並且重繪了節點和箭頭

drawArr是一個自定義方法，負責修改箭頭的方向，代碼如下

        //隨着節點位置的改變動態改變箭頭
        Raphael.fn.drawArr = function (obj) {
            var point = getStartEnd(obj.obj1, obj.obj2);
            var path1 = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 8);
            if (obj.arrPath) {
                obj.arrPath.attr({ path: path1 });
            } else {
                obj.arrPath = this.path(path1);
            }
            return obj;
        };

首先需要確定箭頭的起始位置，

point包含兩個點，

point.start為起點,

point.end為終點，

然后需要確定箭頭的繪圖路徑

一個箭頭包含三個線段，四個點

1:起點，2:終點，3:箭頭終點1，4:箭頭終點2

在此函數中，判斷如果箭頭已經被繪制過，

只要修改屬性即可

如果沒有被繪制過，則需要重新繪制

下面來看一下動態確定起點和終點的代碼

function getStartEnd(obj1, obj2) {
            var bb1 = obj1.getBBox(),
                bb2 = obj2.getBBox();
            var 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 }
                ];
            var 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 result = {};
            result.start = {};
            result.end = {};
            result.start.x = p[res[0]].x;
            result.start.y = p[res[0]].y;
            result.end.x = p[res[1]].x;
            result.end.y = p[res[1]].y;
            return result;
        }

這段代碼來自Raphael官方demo

不是我寫的

也一時半會說不清楚，

大家還是自己去研究吧

確定箭頭路徑的代碼如下

        //獲取組成箭頭的三條線段的路徑
        function getArr(x1, y1, x2, y2, size) {
            var angle = Raphael.angle(x1, y1, x2, y2);//得到兩點之間的角度
            var a45 = Raphael.rad(angle - 45);//角度轉換成弧度
            var a45m = Raphael.rad(angle + 45);
            var x2a = x2 + Math.cos(a45) * size;
            var y2a = y2 + Math.sin(a45) * size;
            var x2b = x2 + Math.cos(a45m) * size;
            var y2b = y2 + Math.sin(a45m) * size;
            var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
            return result;
        }

此函數把箭頭路徑作為數組反饋給調用函數

數組中

M表示畫筆起點移動到此點

L表示從某點繪制到某點，繪制直線

以上函數反饋結果的意思是：

畫筆從（x1,y1）開始繪制直線到(x2,y2),然后從(x2,y2)繪制直線到(x2a,y2a)然后畫筆移動到(x2,y2)然后從(x2,y2)繪制直線到(x2b,y2b)

在確定這幾個點的過程中

用到了一些數學知識，具體原理也不多說了

喜歡的朋友請點支持！謝謝大家！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web流程圖繪制使用raphael 箭頭流程圖--前端實現 raphael.js 流程圖實例 gojs繪流程圖流程圖繪制使用Typora繪制流程圖使用SVG繪制流程圖 (轉)使用graphviz繪制流程圖 gojs插件——動態可拖動流程圖插件使用Typora繪制類圖、流程圖、時序圖