使用Canvas和AngularJS
我正在执行一项任务，重新编写HTML5中的以下Flash应用程序：
http://www.docircuits.com/circuit-editor
鉴于应用程序的复杂性和我的研发到目前为止，我已经确定了AngularJS作为实施的首选MVC框架。 该应用程序有各种部分，如面板，菜单，属性，图表等，我相信所有这些都可以在AngularJS中轻松实现。
然而，关键的问题是，组件的devise和交互（如拖放，移动，线处理等）需要基于canvas，因为我已经能够从Flash中导出所有的vectorgraphicsCreateJS工具包（ http://www.adobe.com/in/products/flash/flash-to-html5.html ）放到Canvas库中，而不是SVG。
问题在于“canvas内的单个对象”和AngularJS之间没有明确的沟通方式。 我已经看了下面的例子，但是几乎所有的例子都在canvas对象上工作，而不是在Canvas里面处理单个的组件：
AngularJS绑定到WebGL / Canvas
那里已经有一个AngularJS的canvas绘图指令了吗？
我有点卡在这里，不知道该怎么办。 真的很感激一些意见：
-
AngularJS是否是正确的select？
-
我应该尝试在另一个库（如Fabric.js，kinect.js，Easel.js）中实现Canvas部分，并将其与Angular（它现在似乎太大任务）集成？
-
如果以上都不是，那么我应该切换到哪个框架，轻松处理canvas以及面板，菜单，图表等其他function？
我们终于设法与AngularJS和HTML5 Canvas一起工作。 下面我将简要地分享我们的要求和我们遵循的方法来实现它。
这个要求有点棘手，因为我们想要：
-
处理canvas内各个元素的事件句柄，并且能够根据AngularJS中的数据dynamic添加这些元素
-
保留AngularJS中每个单独元素的数据，同时使用Canvas仅显示数据。
-
在某些情况下，使用控制器inheritance来处理特殊的数据（例如，所有的实例都应该是可移动的和可拖动的，但是某些实例可能需要闪烁或者显示一些色带等）
为了处理Canvas上的操作，我们将其分为两部分：
-
canvas服务
它做的工作
-
初始化canvas
-
添加或删除canvas中的任何元素
-
刷新canvas
-
-
实例指令和控制器
-
angular度控制器保留相应的“canvas元素”的句柄以及与之相关的所有数据。
-
每个元素上的事件侦听器触发angular控制器中的特定function，该angular控制器操纵实例数据
-
该指令监视控制器中的实例数据，并借助canvas服务相应地更新canvas
-
对于控制器inheritance，我们发现以下方法非常有用： https ： //github.com/exratione/angularjs-controller-inheritance
这有助于我们dynamic地创build控制器，并且在实例指令的帮助下，我们还可以处理canvas上的各个更新以及通用事件处理。
我明白这种方法可能不是完全基于AngularJS的，但是对我们来说运行良好，我们能够处理AngularJS和HTML5 Canvas之间的合理的交互。
当然你可以用Angular做到这一点。 然而，根据你的应用程序的复杂性和数据同步的types，你需要我build议使用JS原型来处理。 “angular度的方式”将是使用指令。
创build一个全局绘图上下文，然后将各个组件分割成JS对象。 在每个对象中处理设置，逻辑，更新等（像类一样），然后绘制到全局上下文中。 你应该有一个主要的draw loop ，它本质上是一个setTimeOut函数，可以更新游戏对象状态并重绘所有东西。
另一种方法是结合Angular和JS原型。 这是一个很好的例子： https ： //github.com/IgorMinar/Memory-Game
编辑：另一个angular度build设游戏的例子http://alicialiu.net/leveling-up-angular-talk/examples/directive.html
