基于Prototype，利用Canvas繪圖實(shí)現(xiàn)的web流程圖設(shè)計(jì)器（原型）

關(guān)鍵字: javascript prototype script.aculo.us canvas 流程圖 web畫線 剛才在首頁(yè)看到這么個(gè)帖子 圖形間連線算法 ，說(shuō)來(lái)也巧，最近自己也在做這么個(gè)玩意兒，就是在web上拖放圖標(biāo)，然后連線，這段時(shí)間也算有點(diǎn)收獲，實(shí)現(xiàn)了這么個(gè)玩意兒，發(fā)上來(lái)給大家看看，順便征求點(diǎn)意見(jiàn)。附件是效果圖和源碼示例。

特點(diǎn)：
1、基于Prototype、Script.aculo.us，利用HTML5的標(biāo)簽Canvas實(shí)現(xiàn)，因?yàn)閕e目前不支持這個(gè)，所以引入了google的excanvas庫(kù)適配到VML，但是對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，api都是同一的一套，比較爽；

2、節(jié)點(diǎn)可動(dòng)態(tài)生成、可拖放，并顯示了拖放行為，比如不會(huì)拖出畫板，也不會(huì)重疊在一起（這樣對(duì)以后連線開(kāi)了方便之門）；

3、繪制連線的時(shí)候，可根據(jù)鼠標(biāo)移動(dòng)，實(shí)時(shí)反映線段狀態(tài)，拖動(dòng)節(jié)點(diǎn)也能試試反映連線狀態(tài)；

4、節(jié)點(diǎn)、連線都可響應(yīng)鼠標(biāo)點(diǎn)擊選中事件，并可響應(yīng)鍵盤delete鍵刪除選中的元素（線段或節(jié)點(diǎn)）；

5、源碼結(jié)構(gòu)實(shí)現(xiàn)了OO封裝以及經(jīng)典的MVC模式，大大降低各部分耦合度。

繪圖步驟：
1、您可以在右側(cè)拖放一個(gè)項(xiàng)目到左側(cè)的畫板生成一個(gè)新方塊（這個(gè)以后可以用漂亮的圖標(biāo)代替），在初始化的時(shí)候我已經(jīng)加入了三個(gè)；

2、點(diǎn)擊畫板上方的“單向連線”按鈕之后，即可點(diǎn)擊起始節(jié)點(diǎn)，然后移動(dòng)鼠標(biāo)至結(jié)束節(jié)點(diǎn)再點(diǎn)擊一下，即可在這兩個(gè)節(jié)點(diǎn)間繪制有向線段。每次只能畫一條線，畫完了需要再次點(diǎn)擊按鈕重復(fù)繪制；

3、節(jié)點(diǎn)可拖動(dòng)，但是不會(huì)被拖出畫板，如果兩個(gè)節(jié)點(diǎn)重疊了，那么不會(huì)允許放置在最終位置，而是彈回原始位置；

4、點(diǎn)擊節(jié)點(diǎn)可選中當(dāng)前節(jié)點(diǎn)，要選擇線段的話必須點(diǎn)擊中部的箭頭處，被選中的元素以紅色區(qū)分，此時(shí)可通過(guò)敲擊鍵盤delete鍵刪除此元素，而且，如果刪除的是有連線的節(jié)點(diǎn)，此節(jié)點(diǎn)相關(guān)的連線都將被刪除。

結(jié)語(yǔ)：這只是個(gè)原型，還有待完善，最大的問(wèn)題還是對(duì)于OP9，連線中點(diǎn)的箭頭顯示還有問(wèn)題，慢慢來(lái)吧，先放出來(lái)給大家看看，歡迎交流。如果大家有非直線連接圖形的好算法，希望能提供出來(lái)，非常感謝！

順便廣告一下，昨天在je也發(fā)布了一個(gè)基于Canvas的仿Google動(dòng)畫導(dǎo)航條實(shí)現(xiàn)，可惜關(guān)注的人不多，我覺(jué)得canvas是個(gè)好玩的東西，希望大家能關(guān)注下，有興趣的可以移駕這里看看：

基于Prototype和Canvas實(shí)現(xiàn)的仿Google導(dǎo)航條

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/xjyggd/archive/2008/07/02/1234207.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。