如何构建AngularJS和PaperJS项目

Question

我们的想法是在简单的画布游戏开发中使用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 = '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 中而不是更改路由来完成：/sf/answers/1877400941/。