相關網站
中文參考：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);
}