html - 如何构建 AngularJS 和 PaperJS 项目

Question

想法是在简单的 Canvas 游戏开发中使用 Angular。从理论上讲，该项目应该受益于更加系统化、可管理和可扩展。这不是 sprite/tile/collision 游戏，PaperJS 用于进行大多数 Canvas 绘制和交互。

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

背景:

论文JS

我正在开发一个项目，创建一个简单的 canvas 游戏，有 4 个阶段。我决定使用 PaperJS，因为它在绘制和动画形状方面具有优势。每个阶段的内容和用户界面都保存在同一论文项目中的单独层中。

Angular JS

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

• 4 个游戏阶段分为四个 View ，每个 View 都有自己的 Canvas
• 自定义指令用于在每个 Canvas 上设置纸张
• 使用服务在 Canvas 之间进行通信。例如允许用户在第一阶段绘图，第二阶段显示绘图

我在 plunker 中制作了一个模型，展示了 Paper.js 的基本设置和动画。每个 Canvas 都位于一个单独的 View 中，并启用了路由。

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

为了测试，我做了

paper.project.layers[0].children

随时可见。设置纸张后，触发“添加形状”按钮会按预期将 child 引入事件层。

问题 1(演示中的 Draw1)

在 DRAW1 中，纸张只会在 View 首次加载时在 Canvas 上设置一次:

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 = 'left';
                text.fillColor = 'black';

            var text2 = new PointText(new Point(200, 200));
                text2.justification = 'center';
                text2.fillColor = 'black';
                text2.content = 'click to change size';

            shape.onClick = function(event) {
                this.fillColor = 'orange';
                scope.$apply(function () {
                  scope.setWidth(Math.round((Math.random()*100)+100));
                });
            }

            view.onFrame = function(event) {

                if ( text.position.x > 440 ){
                  text.position.x = -40;
                } else {
                  text.position.x = text.position.x + 3;
                }

                text.content = 'Shape width: ' + scope.objectValue.width;

                shape.radius = scope.objectValue.width;

                scope.$apply(function () {
                    scope.setMessage();          
                });

            }

            paper.view.draw();

        }

    } else {

        scope.setMessage();

    }

}

return {
    link: link
}

}]);

但是，如果从 DRAW1 导航到 HOME 并返回到 DRAW1， Canvas 将显示为空白。但是此时触发“添加形状”仍会为图层创建新的子项。

问题 2(演示中的 DRAW2)

通过删除这一行

if ( scope.objectValue.count < 1){
    // ... paper setup ...
}

纸张每次加载时都会在 DRAW2 中设置。

但这每次都会引入一个新的论文项目。

谢谢

感谢您的任何意见和建议。

Answer 1

您正在 link 函数中创建新的论文项目，每次使用您的指令都会运行该函数，特别是每次生成新 View 时。

如果你想让它只运行一次，你可以把它放在指令的compile函数中，或者放在专用的Angular service中，或者不要关闭/重新-打开 View 。

后者可以简单地使用 ng-show/ng-hide 将 View 保留在 DOM 中而不是更改路由来完成:https://stackoverflow.com/a/26820013/1614973 .