Question

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

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

背景

论文JS

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

Angular JS

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

4个游戏阶段分为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 = '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，则画布将显示为空白。但是此时触发“添加形状”仍然会为图层创建新的子项。

问题2（演示中的DRAW2）

删除此行

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

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

但每次都会引入一个新的纸质项目。

谢谢

感谢您提出任何建议和意见。

Answer 1

您正在link函数中创建新的纸质项目，每次对指令的每次新用途都会运行，特别是每次生成新视图时。

如果您希望它只运行一次，您可以将其放在指令的compile函数中，或者放在专用的Angular service内，或者不要关闭/重新打开视图。

后者只需使用ng-show/ng-hide保持DOM内的视图而不是更改路径即可：https://stackoverflow.com/a/26820013/1614973。

如何构建AngularJS和PaperJS项目

1 个答案: