对raphael js初步认识

原创
2014/04/16 11:45
阅读数 1K

//页面中首先引入

<script src="${ctx }/scripts/raphael.js" type="text/javascript"></script>

1://点与点之间创建关系 (graffle.js的主要代码内容)

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(",");
    var point = getStartEnd(obj1, obj2);
    var path = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 8);
    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
        };
    }
};

//点与点之间的关系线,带箭头 如:“——>”所示

 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;
        };

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;
}

//得到点之间的path
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;
}

//旋转的进度显示

function spinner(holderid, R1, R2, count, stroke_width, colour) {
    var sectorsCount = count || 12,
        color = colour || "#fff",
        width = stroke_width || 15,
        r1 = Math.min(R1, R2) || 35,
        r2 = Math.max(R1, R2) || 60,
        cx = r2 + width,
        cy = r2 + width,
        r = Raphael(holderid, r2 * 2 + width * 2, r2 * 2 + width * 2),
       
        sectors = [],
        opacity = [],
        beta = 2 * Math.PI / sectorsCount,

        pathParams = {stroke: color, "stroke-width": width, "stroke-linecap": "round"};
        Raphael.getColor.reset();
    for (var i = 0; i < sectorsCount; i++) {
        var alpha = beta * i - Math.PI / 2,
            cos = Math.cos(alpha),
            sin = Math.sin(alpha);
        opacity[i] = 1 / sectorsCount * i;
        sectors[i] = r.path([["M", cx + r1 * cos, cy + r1 * sin], ["L", cx + r2 * cos, cy + r2 * sin]]).attr(pathParams);
        if (color == "rainbow") {
            sectors[i].attr("stroke", Raphael.getColor());
        }
    }
    var tick;
    (function ticker() {
        opacity.unshift(opacity.pop());
        for (var i = 0; i < sectorsCount; i++) {
            sectors[i].attr("opacity", opacity[i]);
        }
        r.safari();
        tick = setTimeout(ticker, 1000 / sectorsCount);
    })();
    return function () {
        clearTimeout(tick);
        r.remove();
    };
}

 

2:用法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html;charset=GBK"%>
<%@ include file="/commons/taglibs.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
  <head>
    <%@ include file="/commons/meta.jsp" %>
    <!--  *******需要的js开始************ -->
    <script src="${ctx }/scripts/raphael.js" type="text/javascript"></script>
    <script src="${ctx }/scripts/graffle.js" type="text/javascript"> </script>
    <link href="${ctx}/css/design.css" rel="stylesheet" type="text/css">
   <!-- *******需要的js结束************ -->
<style type="text/css" media="screen"></style>
<title></title>
</head>
<s:form id="form1" action="" theme="simple">
  <body>
  <p id="coords"></p>
  <div id="holder"></div>
  <c:forEach items="${repinfoList}"  varStatus="status">  
     <div id="test${repinfoList[status.index].repinfoid}" class="test">
         ${repinfoList[status.index].repname}</div>
     <input id="desc${repinfoList[status.index].repinfoid}" type="hidden" value="${repinfoList[status.index].replinkdesc}"/>   
  <input id="asc${repinfoList[status.index].repinfoid}" type="hidden" value="${repinfoList[status.index].replinkasc}"/> 
 </c:forEach>
  </body>
  <input id="repinfoid" type="hidden"/>
  <input id="repinfofid" type="hidden"/>
  <input id="replinkdesc" type="hidden"/>
  <input id="replinkasc" type="hidden"/>
</s:form>
</html>
<script language="javascript">
    var el;
    var count=${fn:length(repinfoList)};
 window.onload = function () {
  var dragger = function () {
         this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
         this.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);
             //给设备增加文本信息
             $("#test" + this.data("repinfoid")).offset({ top: this.oy + dy + 65, left: this.ox + dx + 40 });
             for (var i = connections.length; i--;) {
                 r.connection(connections[i]);
             }
             r.safari();
         },
         up = function () {
             //拖动结束后更新坐标位置
            /** $.ajax({
       type: "POST",
       url: "${ctx}/repAction!toRepinfoListforUpdate.action",
       data: "repinfoid="+this.data("repinfoid")+"&repx="+this.attr("x")+"&repy="+this.attr("y"),
       success: function(msg){
       }
    });**/
         },
         r = Raphael("holder", 1240, 800),
         connections = [],
     //在这里产生要画出来的对象====开始=====
      shapes = new Array(count);
      <c:forEach var="repinfo" items="${repinfoList}" varStatus="status">
       shapes[${status.index}]=r.rect(${repinfo.repx}, ${repinfo.repy}, 100,40, 5)
       .data("repinfoid", ${repinfo.repinfoid})
       .data("repinfofid", ${repinfo.repinfofid})
       .data("repx", ${repinfo.repx})
       .data("repy", ${repinfo.repy})
       .data("openstatus", ${repinfo.openstatus})
       .dblclick(function(){
        openDivWin('${ctx }/repAction!toRepinfoView.action?repinfoid='+this.data("repinfoid")+"&replinkid="+${replinkid},550,250);
       });
       $("#test"+${repinfo.repinfoid}).offset({ top: ${repinfo.repy} + 65, left: ${repinfo.repx} + 40 });
  </c:forEach>
         
      for (var i = 0, ii = shapes.length; i < ii; i++) {
          var color = Raphael.getColor();
          shapes[i].attr({fill: "green", stroke: color, "stroke-width": 3, cursor: "move"});
    //====================判断是否是开启状态还是关闭状态====================
    if(shapes[i].data("openstatus")!=0){
     shapes[i].attr({"fill-opacity": 1});
    }else{
     shapes[i].attr({"fill-opacity": 0});
    }
    //====================在这里区分对象的连接关系开始====================
    for(var j = i +1 ; j < shapes.length ; j ++) {
         if(shapes[i].data("repinfoid")== shapes[j].data("repinfofid")) {
          //父指向子
          connections.push(r.connection(shapes[i], shapes[j], "green", "green|5"));
          //存储节点间的顺序
         }
       }
       //在这里区分对象的连接关系===结束
          shapes[i].drag(move, dragger, up);
      }
 };
</script>

3:css样式:

body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
 padding-top:10px;padding-left:20px;min-height:600px;height:auto;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}
test{
    position: absolute;
    width: 80px;
    height: 30px;
    top: 0px;
    z-index: 0;
}

4:如果想用进度显示

  <div id="msgCircle" style="padding-top:30px;padding-left:20px;font-size:18px;display:none">
 <span id="span_msg" style="display:none">正在检测,请耐心等待...</span>
  </div> 

<script language="javascript">

window.onload = function () {
  var remove = spinner("msgCircle", 10, 20, 10, 6, "#fff");

}

</script>

如果让其进度不显示,则在js函数中用下面三行即可实现。
       remove();
       remove=spinner("msgCircle", 10, 10, 10, 6, "#fff");
       $("#span_msg").html("已检测完毕");

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部