作者carlcarl (carl)
看板Ajax
标题[心得] 试了一下kineticjs套换canvas
时间Mon Sep 3 19:36:35 2012
写起来跟以前写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