Kap*_*hik 38 canvas html5-canvas 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对象上工作,而不是处理Canvas中的各个组件:
我有点被困在这里,不知道该怎么做.真的很感激一些评论:
AngularJS是否是正确的选择？
我应该尝试在另一个库中实现Canvas部分(例如Fabric.js,kinect.js,Easel.js)并将其与Angular集成(现在这似乎也是一项太大的任务)？
如果不是上述内容,我应该切换到哪个其他框架可以轻松处理画布以及面板,菜单,图表等其他功能？
Kap*_*hik 42
我们终于一起使用AngularJS和HTML5 Canvas.在下文中,我将简要分享我们的要求以及我们实现它的方法.
这个要求有点棘手,因为我们想:
处理画布内各个元素的事件句柄,并能够根据AngularJS中的数据动态添加这些元素
保留AngularJS中每个元素的数据,同时使用Canvas仅显示数据.
在某些情况下,使用控制器继承进行特殊数据处理(例如,所有实例都应该是可移动和可拖动的,但某些实例可能需要闪烁或显示一些色带等)
为了处理Canvas上的操作,我们将其分为两部分:
帆布服务
它完成了工作
初始化画布
在画布中添加或删除任何元素
刷新画布
实例指令和控制器
角度控制器保留相应"画布元素"的句柄,以及与之关联的所有数据.
每个元素上的事件侦听器触发角度控制器中的特定函数,这些函数操纵实例数据
该指令在控制器中监视实例数据,并在canvas服务的帮助下相应地更新画布
对于控制器继承,我们发现以下方法非常有用:https: //github.com/exratione/angularjs-controller-inheritance
这有助于我们动态创建控制器,并且在实例指令的帮助下,我们还可以处理画布上的各个更新以及通用事件处理.
我知道这种方法可能不完全是面向AngularJS的,但它对我们来说效果很好,我们能够处理AngularJS和HTML5 Canvas之间的合理数量的交互.
当然你可以用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