写起来跟以前写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