用帆布和AngularJS工作 [英] Working with Canvas and AngularJS

问题描述

我正在一个任务重新写在HTML5以下Flash应用程序：

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

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

由于应用的复杂性，我的RND到目前为止，我已经确定AngularJS为pferred MVC框架的实施$ P $。该应用程序有不同的部位，如面板，菜单，属性，图表等，所有这一切，我相信可以在AngularJS可以轻松实现。

Given the complexity of the app and my RnD 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.

问题的关键是但组件设计和交互（之类的东西，拖/放，移动，处理线等），这需要根据是帆布，因为我已经能够将所有的矢量图形从闪存使用出口CreateJS工具包（<一个href=\"http://www.adobe.com/in/products/flash/flash-to-html5.html\">http://www.adobe.com/in/products/flash/flash-to-html5.html)到画布lib和不为SVG。

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

我现在面临的问题是，有画布内单个对象，并angularJS之间沟通没有明确的办法。我已经看了看下面的例子，但在画布对象上几乎所有的工作，而不是处理画布里面各个组件：

The problem which I am facing 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绑定到的WebGL /画布

<一个href=\"http://stackoverflow.com/questions/16587961/is-there-already-a-canvas-drawing-directive-for-angularjs-out-there\">Is已经有一个绘图画布指令来AngularJS在那里？

我有点坚持在这里，不知道该怎么做。真的AP preciate一个一些意见的：

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

• 无论角度是正确的选择？ （我仍然认为大多数其他的事情将在角很容易做....如果我只能处理画布上的东西.....但作为一个新手，我的知识是有限的）

• Whether angular is the right choice? (I still think most other things will be done quite easily in Angular....if I can only handle the canvas stuff.....but being a newbie my knowledge is limited)

我应该尝试实现在另一个库画布的一部分（如Fabric.js，kinect.js，Easel.js），并将其与角度整合（这似乎再次太大的任务现在）

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 tasks for now)

如果没有以上，我应该切换到，这很容易处理的帆布以及像面板，菜单，图表等其他功能还有什么其他的框架放心。

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

问候，

卡皮尔

推荐答案

我们终于设法与angularjs和帆布一起工作。这里下面，我想简要我们的要求和方法来分享我们跟着去实现它。

We finally managed to work with angularjs and canvas together. Here below, I am trying to share in brief our requirements and the approach we followed to achieve it.

要求是因为我们想一个小技巧：

The requirement was a bit tricky as we wanted to:

1. 处理事件的处理在画布中的各个元素，并能够根据angularjs数据

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

而使用Canvas仅用于数据的显示保持为每个单独的元素数据angularjs。

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

在某些情况下，数据的特殊处理（对于例如，所有的实例应该是可移动和拖动，但有些情况下可能需要眨眼或表现出一定的色带等）使用的控制器继承

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. 帆布服务

1. Canvas service

它做的工作。

• 初始化画布

• initializing the canvas

添加或画布删除任何元素

adding or removing any element from the canvas

刷新画布

实例指令和控制

• 角控制器保持所述手柄为相应的画布元件的，也都被与之相关联的数据。

• 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

有关控制器继承，我们发现下面的方法非常有用：
<一href=\"https://github.com/exratione/angularjs-controller-inheritance\">https://github.com/exratione/angularjs-controller-inheritance

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.

据我所知，这种方法可能不完全棱角分明，但它运作良好，对我们来说，我们能够处理angularjs和帆布相互作用的合理费用。

I understand that this approach may not the completely angular, but it worked well for us, and we were able to handle a reasonable amount of interaction between angularjs and canvas.

希望这有助于！

问候，

卡皮尔

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