使用Canvas和AngularJS

Question

我正在接受一项任务，在HTML5中重写以下Flash应用程序：

http://www.docircuits.com/circuit-editor

鉴于应用程序和我的R＆amp; D到目前为止的复杂性，我已将AngularJS确定为实施的首选MVC框架。该应用程序有各种部分，如面板，菜单，属性，图表等，我相信所有这些都可以在AngularJS中轻松实现。

然而，关键问题是组件设计和交互（诸如拖放，移动，线缆处理等）需要基于Canvas，因为我能够导出所有矢量图形从Flash使用CreateJS工具包（http://www.adobe.com/in/products/flash/flash-to-html5.html）到Canvas库而不是SVG。

问题在于没有明确的方法在“画布内的单个对象”和AngularJS之间进行通信。我查看了以下示例，但几乎所有示例都在canvas对象上工作，而不是处理Canvas中的各个组件：

AngularJS Binding to WebGL / Canvas

Is there already a canvas drawing directive for AngularJS out there?

我有点被困在这里，不知道该怎么做。非常感谢您的一些评论：

• AngularJS是否是正确的选择？

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

• 如果不是上述内容，我应该切换到哪个其他框架可以轻松处理画布以及面板，菜单，图表等其他功能？

Answer 1

我们终于一起使用AngularJS和HTML5 Canvas。在下文中，我将简要分享我们的要求以及我们为实现这一目标所采用的方法。

我们想要的要求有点棘手：

1. 处理画布内各个元素的事件句柄，并能够根据AngularJS中的数据动态添加这些元素

2. 保留AngularJS中每个元素的数据，同时使用Canvas仅显示数据。

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

为了处理Canvas上的操作，我们将其分为两部分：

1. 画布服务

   它完成了

   的工作

   • 初始化画布

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

   • 刷新画布

2. 实例指令和控制器

   • 角度控制器保留相应“画布元素”的句柄，以及与之关联的所有数据。

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

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

对于控制器继承，我们发现以下方法非常有用： https://github.com/exratione/angularjs-controller-inheritance

这有助于我们动态创建控制器，并且在instance指令的帮助下，我们还可以在画布上处理各个更新以及通用事件处理。

我知道这种方法可能不完全是面向AngularJS的，但它对我们来说效果很好，我们能够处理AngularJS和HTML5 Canvas之间的合理数量的交互。

Answer 2

当然，你可以用Angular做到这一点。但是，根据您的应用程序的复杂性和您需要的数据同步类型，我建议使用JS原型来处理它。 “角度方式”将改为使用指令。

创建全局绘图上下文，然后将各种组件拆分为JS对象。处理每个对象（类似于类）中的设置，逻辑，更新等，然后绘制到全局上下文。你应该有一个主draw loop，它本质上是一个setTimeOut函数，用于更新游戏对象状态并重绘所有内容。

另一种方法是组合Angular和JS原型。这是一个很好的例子：https://github.com/IgorMinar/Memory-Game

编辑：用角度http://alicialiu.net/leveling-up-angular-talk/examples/directive.html

构建游戏的另一个例子