[心得] 試了一下kineticjs套換canvas
寫起來跟以前寫JAVA作類似東西的感覺很像
東西基本上都已經用物件包好
然後還有提供layer讓你可以很方便的在不同layer放你要的物件
我嘗試把我原本播放棋譜的canvas改成套用kinetic
不過後來發現 因為我的canvas操作沒很複雜 所以真的是太大材小用了...
以可讀性來講 因為我大部分畫canvas都是放在一個function裡
大致用幾個註解分幾個段落 其實就知道各部份的流程
換成物件的方式 整個function感覺並沒有更好讀 而且程式沒有比較短=.=
然後我用一個固定的測試流程來作測試
(這個流程不包括前面的js file loading 是讀完後才開始作操作測試)
測試的結果原本是200ms 換成kineticjs之後是800ms
整個很不划算~.~
雖然kineticjs有提供layer
不過如果只是簡單操作的話 這個我自己幹也是OK
就動態新增幾個canvas 設z-index就有類似一樣的效果
我自己現在是設定棋盤一個background layer 棋子和其他一些標示設到front layer
然後只render"改變的部份"這塊
kineticjs需要紀錄在layer中的每個物件
不然在移除棋子的時候 沒辦法知道是要remove layer中的哪個棋子
這樣就變成需要多一個資料結構來紀錄
原本的canvas我要作的話 像是移除某個棋子
我只要把background layer的那部份拿來蓋掉棋子就可以了 相較之下會比較方便些
後來實作這部份之後 時間也從200ms 降到130ms左右
之前測從一個layer切成兩個layer後 時間似乎沒啥差囧
不過使用者點擊的這部份 目前還是render全部
因為假如我按上一步的話 現在這一步的棋盤會移除掉
當我要畫上一步的棋盤時就沒辦法根據差異來只畫改變的部份
我現在是存棋盤上一個狀態是在哪一步
當然如果要改成存上一個狀態的整個棋盤就能解決 但是我怕overhead會太大
所以結論是 我覺得如果會需要用到一些mouse event(ex: draf)或是animation的話
這時候再考慮用kineticjs吧 不然只有一些簡單的操作的話用canvas就好~
另外kineticjs在設定一些shape的attr 會發現比canvas的還少一點
因為有些都在程式裡寫死了 這個可能要注意一下=.=
(打字打到最後給我斷線 P幣沒了QQ)
--
http://blog.carlcarl.tw
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 1.175.132.171