# 对raphael js初步认识

2014/04/16 11:45

//页面中首先引入

<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>
<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)};
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 {
}
#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：如果想用进度显示

<span id="span_msg" style="display:none">正在检测，请耐心等待...</span>
</div>

<script language="javascript">

var remove = spinner("msgCircle", 10, 20, 10, 6, "#fff");

}

</script>

remove();
remove=spinner("msgCircle", 10, 10, 10, 6, "#fff");
\$("#span_msg").html("已检测完毕");

0
2 收藏

0 评论
2 收藏
0