基于Prototype，利用Canvas繪圖實現的web流程圖設計器（原型）

關鍵字: javascript prototype script.aculo.us canvas 流程圖 web畫線 剛才在首頁看到這么個帖子 圖形間連線算法 ，說來也巧，最近自己也在做這么個玩意兒，就是在web上拖放圖標，然后連線，這段時間也算有點收獲，實現了這么個玩意兒，發上來給大家看看，順便征求點意見。附件是效果圖和源碼示例。

特點：
1、基于Prototype、Script.aculo.us，利用HTML5的標簽Canvas實現，因為ie目前不支持這個，所以引入了google的excanvas庫適配到VML，但是對于開發人員來說，api都是同一的一套，比較爽；

2、節點可動態生成、可拖放，并顯示了拖放行為，比如不會拖出畫板，也不會重疊在一起（這樣對以后連線開了方便之門）；

3、繪制連線的時候，可根據鼠標移動，實時反映線段狀態，拖動節點也能試試反映連線狀態；

4、節點、連線都可響應鼠標點擊選中事件，并可響應鍵盤delete鍵刪除選中的元素（線段或節點）；

5、源碼結構實現了OO封裝以及經典的MVC模式，大大降低各部分耦合度。

繪圖步驟：
1、您可以在右側拖放一個項目到左側的畫板生成一個新方塊（這個以后可以用漂亮的圖標代替），在初始化的時候我已經加入了三個；

2、點擊畫板上方的“單向連線”按鈕之后，即可點擊起始節點，然后移動鼠標至結束節點再點擊一下，即可在這兩個節點間繪制有向線段。每次只能畫一條線，畫完了需要再次點擊按鈕重復繪制；

3、節點可拖動，但是不會被拖出畫板，如果兩個節點重疊了，那么不會允許放置在最終位置，而是彈回原始位置；

4、點擊節點可選中當前節點，要選擇線段的話必須點擊中部的箭頭處，被選中的元素以紅色區分，此時可通過敲擊鍵盤delete鍵刪除此元素，而且，如果刪除的是有連線的節點，此節點相關的連線都將被刪除。

結語：這只是個原型，還有待完善，最大的問題還是對于OP9，連線中點的箭頭顯示還有問題，慢慢來吧，先放出來給大家看看，歡迎交流。如果大家有非直線連接圖形的好算法，希望能提供出來，非常感謝！

順便廣告一下，昨天在je也發布了一個基于Canvas的仿Google動畫導航條實現，可惜關注的人不多，我覺得canvas是個好玩的東西，希望大家能關注下，有興趣的可以移駕這里看看：

基于Prototype和Canvas實現的仿Google導航條

• demo.rar (51.9 KB)
• 描述: 源碼示例
• 下載次數: 710

• 描述: 操作截圖，其中一條線正在繪制之中
• 大小: 6.4 KB

轉載于:https://www.cnblogs.com/xjyggd/archive/2008/07/02/1234207.html

總結

以上是生活随笔為你收集整理的[转]基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。