39

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

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

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

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

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

AngularJS 绑定到 WebGL / Canvas

那里已经有 AngularJS 的画布绘图指令了吗？

我有点卡在这里，不知道该怎么办。非常感谢您对以下内容的一些评论：

  • AngularJS 是否是正确的选择？

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

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

4

2 回答 2

44

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

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

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

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

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

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

  1. 帆布服务

    它的工作是

    • 初始化画布

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

    • 刷新画布

  2. 实例指令和控制器

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

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

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

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

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

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

于 2014-01-10T06:02:16.280 回答
9

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

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

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

编辑：另一个用角度构建游戏的例子http://alicialiu.net/leveling-up-angular-talk/examples/directive.html

于 2013-11-28T15:04:52.947 回答