小编Chr*_*oph的帖子

我们的想法是在简单的画布游戏开发中使用Angular.从理论上讲,该项目应该从更系统,可管理和可扩展的方面受益.这不是精灵/瓷砖/碰撞游戏,PaperJS用于进行大多数画布绘制和交互.

1. 将Paper.js(或其他画布绘图库)集成到多个NG视图中的最佳方法是什么,以使每个视图代表一个游戏阶段？
2. 是否可以设置一次纸张并在多个视图中使用纸张？
3. 该游戏允许用户重新访问之前的阶段/视图.每次视图/画布加载时我是否必须重新设置Paper？(如下图所示,如果仅在视图第二次访问时出现空白画布,则设置一次)
4. 如何在视图之间传输Paper js信息？例如,捕获视图1中的用户绘图,并在视图3中显示绘图.

背景:

纸JS

我正在开发一个项目来创建一个包含4个阶段的简单画布游戏.我决定使用PaperJS来绘制和动画形状.每个阶段的内容和ui保存在同一论文项目的单独层中.

Angular JS

随着游戏的发展,游戏变得越来越复杂.经过一些研究,我决定使用Angular组织整个游戏,虽然我是Angular的新手.计划:

• 4个游戏阶段分为四个视图,每个视图都有自己的画布
• 自定义指令用于在每个画布上设置纸张
• 使用服务进行画布之间的沟通.例如,允许用户在第一阶段绘制并在第二阶段显示绘图

我在plunker中做了一个模拟,用Paper.js显示基本的设置和动画.每个画布都位于单独的视图中,并启用了路由.

Plunker演示:http://plnkr.co/edit/Um1jTp8xTmAzVEdzk2Oq?p=preview

为了测试,我做了

paper.project.layers[0].children

随时可见.设置完纸张后,触发"添加形状"按钮会按预期将子项引入活动层.

问题1(演示中的Draw1)

在DRAW1中,当视图首次加载时,纸张仅在画布上设置一次:

drawControllers.directive('drawingBoard',['drawService',function(drawService){

function link(scope, element, attrs){

    // setup Paper

    var canvas = element[0];

    if ( scope.objectValue.count < 1){

        paper = new paper.PaperScope();
        paper.setup(canvas);
        scope.setCount( scope.objectValue.count + 1 );

        with (paper) {

            var shape = new Shape.Circle(new Point(200, 200), 200);
                shape.strokeColor = 'black';
                shape.fillColor = 'yellow';

            // Display data in canvas
            var text = new PointText(new Point(20, 20));
                text.justification …