使用Canvas和AngularJS

Question

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

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

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

但是，关键问题在于组件的设计和交互（如拖放，移动，电线处理等）必须基于Canvas，因为我已经能够使用Flash从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集成（目前看来又是一项艰巨的任务）？

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

Answer 1

我们最终设法与AngularJS和HTML5Canvas一起使用。在下面，我将简要分享我们的要求以及实现该要求所遵循的方法。

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

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

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

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

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

1. 帆布服务

它的工作

* 初始化画布

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

* 刷新画布

1. 实例指令和控制器

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

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

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

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

这帮助我们动态创建控制器，并借助实例指令，我们还可以在画布上处理各个更新以及常规事件处理。

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