如何构建 AngularJS 和 PaperJS 项目

Posted 2023-03-05

【中文标题】如何构建 AngularJS 和 PaperJS 项目

【英文标题】：How to structure AngularJS and PaperJS project

【发布时间】：2014-10-06 06:07:04

【问题描述】：

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

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

背景：

Paper JS

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

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 ...

每次加载时，Paper 都会在 DRAW2 中设置。

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

谢谢

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

【参考方案1】：

您正在link 函数内创建新的纸质项目，该函数在每次新使用您的指令时运行，特别是每次生成新视图时。

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

后者可以简单地使用 ng-show/ng-hide 将视图保留在 DOM 中而不是更改路由：https://***.com/a/26820013/1614973。