javascript绘图类库raphael.js学习
相关网站
中文参考：http://dishuostec.sinaapp.com/javascript/raphael/
raphael是什么？
raphael是一个在网页中绘制矢量图的javascript库，可以应用raphael在网页中轻松绘制各种图形。
raphael使用svg w3c推荐标准和VML作为基础创建图形，这意味着创建的一个图形对象也是一个DOM 对象，可以像操作DOM对象一样操作raphael创建的图形对象。
支持各种流行的浏览器：firefox3.0+,safari3.0+,chrome5.0+,opera9.5+,ie6.0+。
raphael怎样使用？
<html>
<head>
<script type="text/javascript" src="raphael.js"></script>
<script>
var paper = Raphael(10, 50, 800, 600);//在(10,50)坐标位置创建大小为800*600像素的画布
var circle = paper.circle(100, 100, 50);//在画布的(100,100)位置画50px半径的圆
circle.attr("fill", "#f00");//圆填充红色
circle.attr("stroke", "#fff");//圆边为白色
</script>
</head>
<body>
</body>
</html>
自定义图形实现拖动实例
Raphael.fn.mygraph = function() {
var curve = this.path("M10,20L70,80");
var mask = this.rect(10, 20, 60, 60);
mask.curve = curve;
mask.drag(_move, _start, _end);
return mask;
}
function _start() {
this.lastDX = 0;
this.lastDY = 0;
this.animate({"fill-opacity": .2}, 100);
}
function _move(dx, dy) {
var deltaX = dx - this.lastDX;
var deltaY = dy - this.lastDY;
this.lastDX = dx;
this.lastDY = dy;
this.translate(deltaX / this.matrix.a, deltaY / this.matrix.d);
this.curve.translate(deltaX / this.matrix.a, deltaY / this.matrix.d);
}
function _end() {
this.animate({"fill-opacity": 0}, 200);
}
