使用 Canvas 和 AngularJS [英] Working with Canvas and AngularJS

问题描述

我正在接受一项任务，用 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 中的单个组件:

AngularJS 绑定到 WebGL/Canvas

是否已经有画布绘图指令用于 AngularJS 吗?

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

• AngularJS 是否是正确的选择?

• 我是否应该尝试在另一个库(例如 Fabric.js、kinect.js、Easel.js)中实现 Canvas 部分并将其与 Angular 集成(现在看来这又是一项艰巨的任务)?

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

解决方案

我们终于成功地将 AngularJS 和 HTML5 Canvas 一起工作.下面，我将简要分享我们的要求以及我们实现它所采用的方法.

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

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

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

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

   立>

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

1. 画布服务

   它完成了

   • 初始化画布

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

   • 刷新画布

2. 实例指令和控制器

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

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

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

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

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

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

I am taking up a task to re-write the following flash app in HTML5:

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

Given the complexity of the app and my R&D so far, I have identified AngularJS as the preferred MVC framework for the implementation. The app has various parts such as panels, menus, properties, charts, etc., all of which I believe can be easily implemented in AngularJS.

The key problem, however, is that the component design and interaction (things like, drag/drop, move, wire handling, etc.) need to be Canvas-based, as I have been able to export all the vector graphics from Flash using the CreateJS toolkit (http://www.adobe.com/in/products/flash/flash-to-html5.html) into a Canvas library and not to an SVG.

The problem is that there is no clear way to communicate between the "individual objects inside a canvas" and AngularJS. I have looked at the following examples, but almost all of them work on the canvas object, and not about handling individual components inside Canvas:

AngularJS Binding to WebGL / Canvas

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

I am kind of stuck here, and not sure what to do. Would really appreciate a some comments on:

• Whether AngularJS is the right choice?

• Should I try implementing the Canvas part in another library (such as Fabric.js, kinect.js, Easel.js) and integrate it with Angular (which again seems too big a task for now)?

• If none of the above, what other framework should I switch to that can easily handle canvas as well as other functionality like panels, menus, charts etc. with ease?

解决方案

We finally managed to work with AngularJS and HTML5 Canvas together. Here below, I will share, briefly, our requirements and the approach we followed to achieve it.

The requirement was a bit tricky as we wanted to:

1. Handle event handles on individual elements inside the canvas, and be able to add these elements dynamically based on the data in AngularJS

2. Keep data for each individual element in AngularJS while using Canvas for only display of the data.

3. Use controller inheritance for special handling of data in certain cases (for e.g. all the instances should be movable and draggable, but some instance may need to blink or show some color bands etc.)

To handle the operations on Canvas, we divided it into two parts:

1. Canvas service

   It does the job of

   • initializing the canvas

   • adding or removing any element from the canvas

   • refreshing the canvas

2. Instance directive and controller

   • the angular controller keeps the handle for the corresponding "canvas element", and also all the data that is associated with it.

   • the event listeners on each element trigger specific functions in the angular controller which manipulate the instance data

   • the directive watches the instance data in controller, and correspondingly updates the canvas with the help of the canvas service

For controller inheritance, we found the following approach quite useful: https://github.com/exratione/angularjs-controller-inheritance

This helped us create controllers dynamically, and with the help of instance directive, we could also handle individual updates on the canvas along with the generic event handling.

I understand that this approach may not be completely AngularJS-oriented, but it worked well for us, and we were able to handle a reasonable amount of interaction between AngularJS and HTML5 Canvas.

这篇关于使用 Canvas 和 AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！