Working with Canvas and AngularJS

Question

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

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

鉴于应用程序的复杂性和我迄今为止的研发，我已经确定AngularJS作为实现的首选MVC框架。该应用程序具有各种部分，例如面板，菜单，属性，图表等，我相信所有这些都可以在AngularJS中轻松实现。

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

问题在于，在"画布内的单个对象"和AngularJS之间没有明确的通信方式。我已经查看了以下示例，但几乎所有示例都适用于 canvas 对象，而不是处理 Canvas 中的单个组件：

AngularJS绑定到WebGL/Canvas

是否已经有针对AngularJS的画布绘制指令？

我有点被困在这里，不知道该怎么办。 非常感谢以下方面的一些评论：

• AngularJS是否是正确的选择？

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

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

Answer 1

我们终于设法将 AngularJS 和 HTML5 Canvas 一起使用。下面，我将简要分享我们的要求以及我们为实现此目标而遵循的方法。

这个要求有点棘手，因为我们想要：

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

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

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

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

1. 画布服务

   它完成了以下工作

   • 初始化画布

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

   • 刷新画布

2. 实例指令和控制器

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

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

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

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

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

我知道这种方法可能不是完全面向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 构建游戏的另一个示例