使用Canvas和AngularJS

我正在着手用HTML5重新编写以下flash应用程序：

考虑到应用程序的复杂性和我目前的研发工作，我已经确定AngularJS是实现该应用程序的首选MVC框架。这个应用程序有很多部分，比如面板、菜单、属性、图表等等，我相信所有这些都可以用AngularJS轻松实现

然而，关键问题是组件设计和交互（如拖放、移动、导线处理等）需要基于画布，因为我已经能够使用CreateJS工具包（）将所有矢量图形从Flash导出到画布库，而不是SVG

问题是“画布中的单个对象”和AngularJS之间没有明确的通信方式。我已经看过了以下示例，但几乎所有示例都在画布对象上工作，而不是在画布中处理单个组件：

我被困在这里，不知道该怎么办。如果您能就以下方面发表一些意见，我将不胜感激：

• AngularJS是否是正确的选择

• 我是否应该尝试在另一个库（比如Fabric.js、kinect.js、Easel.js）中实现Canvas部分，并将其与Angular集成（这对于现在来说似乎是一个太大的任务）

• 如果以上都没有，我应该切换到什么样的框架来轻松处理画布以及其他功能，如面板、菜单、图表等

---

当然你可以用Angular很好地做到这一点。但是，根据应用程序的复杂性和所需的数据同步类型，我建议使用JS原型来处理。“有角度的方法”是使用指令
创建全局图形上下文，然后将各种组件拆分为JS对象。处理每个对象内的设置、逻辑、更新等（有点像类），然后绘制到全局上下文。您应该有一个主

绘制循环

，它本质上是一个

设置超时

函数，用于更新游戏对象状态并重新绘制所有内容
另一种方法是结合Angular和JS原型。这是一个很好的例子：

---

编辑：另一个使用AngularJS构建游戏的例子，我们最终成功地将AngularJS和HTML5画布结合在一起。在下文中，我将简要介绍我们的要求以及我们为实现这一目标而采取的方法
要求有点棘手，因为我们希望：
• 处理画布内单个元素上的事件句柄，并能够根据AngularJS中的数据动态添加这些元素

• 在AngularJS中保留每个元素的数据，同时使用画布仅显示数据

• 在某些情况下，使用控制器继承对数据进行特殊处理（例如，所有实例都应可移动和拖动，但某些实例可能需要闪烁或显示某些色带等）

为了处理画布上的操作，我们将其分为两部分：
• 画布服务
  它的作用是
  • 初始化画布

  • 从画布中添加或删除任何元素

  • 刷新画布

• 实例指令和控制器
  • 角度控制器保留相应“画布元素”的句柄，以及与其关联的所有数据

  • 每个元素上的事件侦听器触发角度控制器中的特定函数，这些函数操作实例数据

  • 该指令监视控制器中的实例数据，并在canvas服务的帮助下相应地更新canvas

对于控制器继承，我们发现以下方法非常有用：
这有助于我们动态创建控制器，在instance指令的帮助下，我们还可以处理画布上的单个更新以及通用事件处理

---

我知道这种方法可能不是完全面向AngularJS的，但对我们来说效果很好，我们能够处理AngularJS和HTML5画布之间的合理数量的交互。
My 2-cents:我分别使用/喜欢AngularJS+MVC和Html画布。IMHO，尝试使用Angular来驱动画布绘制是不合适的。嗨，MarkE…谢谢你的评论…是的…这就是我到目前为止读到的…你有没有其他MVC框架可以完成我想做的所有事情？很好，我的情况与你在问题中描述的非常相似（使用动态UI元素、拖放等重写类似的应用程序）。你的指导方针真的很有帮助。我很想在某个地方看到这方面的演示和代码。@MadDogMcFie:我知道代码比逐字记录更有用。但现在我不能分享整个代码，我需要花一些努力来分离特定的代码并发布到某个地方，但我肯定可以帮助任何人你可能有的估计。