使用Canvas和AngularJS

发布时间：2020-12-17 08:44:59 所属栏目：安全来源：网络整理

导读：我正在开始一个任务，在HTML5中重写以下flash应用程序： http://www.docircuits.com/circuit-editor 考虑到应用程序和我的研发部门到目前为止的复杂性，我已经确定AngularJS是实施的首选MVC框架。该应用程序有各种部分，如面板，菜单，属性，图表等，所有这

我正在开始一个任务，在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 Binding to WebGL / Canvas

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

我被困在这里，不知道该怎么办。真的会赞赏一些意见：

> AngularJS是否是正确的选择？
>我应该尝试在另一个库(例如Fabric.js，kinect.js，Easel.js)中实现Canvas部分，并将其与Angular(现在它似乎太大的任务)集成？
>如果没有上述，什么其他框架应该切换到那可以轻松地处理画布以及其他功能，如面板，菜单，图表等轻松？

我们终于设法与AngularJS和HTML5 Canvas一起工作。在下面，我将简要地分享我们的要求和我们遵循的方法来实现它。

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

>处理画布内单个元素上的事件句柄，并且能够基于AngularJS中的数据动态添加这些元素
>在AngularJS中为每个元素保留数据，而使用Canvas仅显示数据。
>在某些情况下使用控制器继承特殊处理数据(例如，所有实例都应该是可移动和可拖动的，但某些实例可能需要闪烁或显示一些颜色带等)

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

>画布服务

它做的工作

>初始化canvas
>从画布中添加或删除任何元素
>刷新画布

>实例指令和控制器

>角度控制器保持相应“画布元素”的句柄，以及与其相关联的所有数据。
>每个元素上的事件监听器触发角度控制器中操纵实例数据的特定函数
>指令监视控制器中的实例数据，并在canvas服务的帮助下相应地更新画布

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

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

我理解这种方法可能不是完全基于AngularJS的，但它对我们工作得很好，我们能够处理AngularJS和HTML5 Canvas之间的合理量的交互。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!