[svg]Rapha?l更好的实现svg图像

简介:

Rapha?l,读作[‘r?fe??l],官网地址,是一个JavaScript工具,只有91kb。可以用来在web界面上画出svg图像。

Rapha?l,是对svg一些基本语法的封装。支持Firefox,Safari,chrome,ie6+

 

从需求入手:

由于项目需要,在web界面上,展示一个网络拓扑图。并且拓扑图各个节点及各个节点直接的连线,可以被控制改变背景色,以及其它交互行为。

 

Rapha?l怎么用

1、将Rapha?l.js包引入到html文件中。

2、直接在html中,写js脚本,画出svg图像。(这里将svg格式文件和html融合在一起了)

(完)

官网案例:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

 

使用Rapha?l实现拓扑图效果:

20141228082832

使用Rapha?l实现拓扑图代码:

第一步,设置一个div,用来存放svg图像

<div id="mypaper"></div>

第二步,对引入Rapha?l.js脚本,并且设置div的宽度高度等样式。

<script type="text/javascript" src="js/raphael.js"></script>
<style type="text/css">
	#mypaper {
		width: 100%;
		height: 100%;
		border: 0px solid red;
		background-color: green;
		align:center;
		margin: 0px;
		padding: 0px;
	}
</style>

第三步,那就是具体的实现了。

<script type="text/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 r = Raphael("mypaper", 300, 680);
	var shapes = [
	               r.rect(110, 30, 60, 40, 10),
	               r.rect(110, 130, 60, 40, 10),
	               r.rect(110, 230, 60, 40, 10),
	               r.rect(110, 330, 60, 40, 10),
	               r.rect(110, 430, 60, 40, 10),
	               r.rect(210, 430, 60, 40, 10),
	               r.rect(110, 530, 60, 40, 10),
	               r.rect(210, 530, 60, 40, 10),
	               r.rect(110, 630, 60, 40, 10),
	               r.rect(210, 630, 60, 40, 10),
			];

	r.text(140, 50, "Internet").attr({ fill : "#fff", "font-size" : 16 });
	r.text(140, 150, "出口").attr({ fill : "#fff", "font-size" : 16 });
	r.text(140, 250, "核心网").attr({ fill : "#fff", "font-size" : 16 });
	r.text(140, 350, "OLT").attr({ fill : "#fff", "font-size" : 16 });
	r.text(140, 450, "ONU").attr({ fill : "#fff", "font-size" : 16 });
	r.text(240, 450, "其它ONU").attr({ fill : "#fff", "font-size" : 16 });
	r.text(140, 550, "用户网关").attr({ fill : "#fff", "font-size" : 16 });
	r.text(240, 550, "其它用户").attr({ fill : "#fff", "font-size" : 16 });
	r.text(140, 650, "大麦").attr({ fill : "#fff", "font-size" : 16 });
	r.text(240, 650, "其它终端").attr({ fill : "#fff", "font-size" : 16});

	for (var i = 0, ii = shapes.length; i < ii; i++) {
		var color = Raphael.getColor();
		shapes[i].attr({
			fill : color,
			//stroke : color,
			stroke : "#00A2BF",
			"fill-opacity" : 0,
			"stroke-width" : 2,
			cursor : "move"
		});
		//shapes[i].drag(move, dragger, up);
	}
	connections = [];
	connections.push(r.connection(shapes[0], shapes[1], "#fff", "#fff"));
	connections.push(r.connection(shapes[1], shapes[2], "#fff", "#fff"));
	connections.push(r.connection(shapes[2], shapes[3], "#fff", "#fff"));
	connections.push(r.connection(shapes[3], shapes[4], "#fff", "#fff"));
	connections.push(r.connection(shapes[3], shapes[5], "#fff", "#fff"));
	connections.push(r.connection(shapes[4], shapes[6], "#fff", "#fff"));
	connections.push(r.connection(shapes[4], shapes[7], "#fff", "#fff"));
	connections.push(r.connection(shapes[6], shapes[8], "#fff", "#fff"));
	connections.push(r.connection(shapes[6], shapes[9], "#fff", "#fff"));

	//var c = r.path("M10 10L90 90");
	//var c = r.path("M 100 100 L 300 100 L 200 300 z");
	//var c = r.path("M600,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25s");
	//var c = r.path("M300,200 h-150 a150,150 0 1,0 150,-150 z");
	//var c = r.path("M20 10 Q140 40 180 20 T280 30");
	//var c = r.path("M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90");

	var line1 = r.path("m 110,50 a 15,30 0 0 0 0,200");
	var line2 = r.path("m 110,250 a 15,30 0 0 0 0,200");
	var line3 = r.path("m 110,250 a 15,30 0 0 0 0,300");
	var line4 = r.path("m 110,250 a 15,30 0 0 0 0,400");

	var line5 = r.path("m 110,450 a 15,30 0 0 0 0,200");
	var line6 = r.path("m 110,550 a 15,30 0 0 0 0,100");

	line1.attr({ stroke:"blue","stroke-width" : 2});
	line2.attr({ stroke:"pink","stroke-width" : 2});
	line3.attr({ stroke:"orange","stroke-width" : 2});
	line4.attr({ stroke:"yellow","stroke-width" : 2});
	line5.attr({ stroke:"gray","stroke-width" : 2});
	line6.attr({ stroke:"black","stroke-width" : 2});
</script>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注