js画图

bdk82924

浏览: 562939 次
性别:
来自: 南京

最近访客更多访客>>

javabang

zjzeric

zfantasy789

zhu1361

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

统计报表

无意间发现的不错的网站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>

<!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 () {
		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);
		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>

分享到：

jQuery插件flexigrid | struts2.1.8中jsonplugin用法

2012-02-21 08:27
浏览 1282
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js画图

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js画图

评论

发表评论

相关推荐

vml动态曲线图_ 多图

JFreeChart帮助文件

Highcharts 强大的jQuery图表制作功能

anychart

JFreeChart在linux端图片显示乱码问题解决 转

JFreeChart 相关参数

Flash Chart 开源项目

JFreeChart JAVA统计报表

amChart 统计报表 JS版本 效果超炫

FusionCharts JS统计图表

最近访客更多访客>>

JFreeChart在linux端图片显示乱码问题解决转

amChart 统计报表 JS版本效果超炫