關于Raphaël
官方宣稱相容各種主流浏覽器，據筆者測試在IE6下尚有一些問題（不過這些與本文無關）
他是使用js來建立vml或svg來繪圖的
緣起
項目中不能使用Silverlight或者flash來解決繪圖和拖動的問題
而且為了項目效果較好，要求拖動的時候箭頭能動态改變起點和重點，别且箭頭要改變方向
是以隻能考慮JS了
效果
示範
源碼
引用
這兩個東西是不相幹的，引用先後順序也無所謂
頁面加載完成後的代碼
這些代碼注釋比較詳細，就不多說了
在這些代碼中涉及到操作的界面元素HTML代碼如下
其中關鍵元素的樣式如下
在拖動事件中，動态改變了節點文本元素的位置
并且重繪了節點和箭頭
drawArr是一個自定義方法，負責修改箭頭的方向，代碼如下
首先需要确定箭頭的起始位置，
point包含兩個點，
point.start為起點,
point.end為終點，
然後需要确定箭頭的繪圖路徑
一個箭頭包含三個線段，四個點
1:起點，2:終點，3:箭頭終點1，4:箭頭終點2
在此函數中，判斷如果箭頭已經被繪制過，
隻要修改屬性即可
如果沒有被繪制過，則需要重新繪制
下面來看一下動态确定起點和終點的代碼
這段代碼來自Raphael官方demo
不是我寫的
也一時半會說不清楚，
大家還是自己去研究吧
确定箭頭路徑的代碼如下
此函數把箭頭路徑作為數組回報給調用函數
數組中
M表示畫筆起點移動到此點
L表示從某點繪制到某點，繪制直線
以上函數回報結果的意思是：
畫筆從（x1,y1）開始繪制直線到(x2,y2),然後從(x2,y2)繪制直線到(x2a,y2a)然後畫筆移動到(x2,y2)然後從(x2,y2)繪制直線到(x2b,y2b)
在确定這幾個點的過程中
用到了一些數學知識，具體原理也不多說了
喜歡的朋友請點支援！謝謝大家！