Html 如何构建AngularJS和PaperJS项目

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

将Paper.js（或其他画布绘图库）集成到多个NG视图中以使每个视图都代表一个游戏阶段的最佳方法是什么

是否可以设置一次图纸并在多个视图中使用图纸

该游戏允许用户重新访问以前的阶段/视图。每次加载视图/画布时是否必须重新设置纸张？（如下面的示例所示，如果仅设置一次，则视图第二次访问时将显示空白画布）

如何在视图之间传输纸张js信息？e、 g.在视图1中捕获用户图形，并在视图3中显示图形

背景：

纸张JS

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

角度JS

随着游戏的发展，它变得越来越复杂。经过一些研究，我决定用Angular来组织整个游戏，尽管我对Angular还不熟悉。该计划：

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

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

Plunker演示：

为了测试起见，我做了

paper.project.layers[0].children

随时可见。纸张设置完成后，按预期启动“添加形状”按钮将子对象引入活动层

问题1（演示中的绘图1）

在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
}

}]);

drawControllers.directive（'drawingBoard'，['drawService'，function（drawService）{
功能链接（范围、元素、属性）{
//设置文件
var canvas=元素[0]；
if（scope.objectValue.count<1）{
纸张=新纸张。PaperScope（）；
纸。设置（画布）；
scope.setCount（scope.objectValue.count+1）；
附（纸）{
var shape=新形状圆（新点（200200），200）；
shape.strokeColor='黑色'；
shape.fillColor='yellow'；
//在画布中显示数据
变量文本=新点文本（新点（20,20））；
text.justification='left'；
text.fillColor='black'；
var text2=新点文本（新点（200200））；
text2.justification='center'；
text2.fillColor='黑色'；
text2.content='单击以更改大小'；
shape.onClick=函数（事件）{
this.fillColor='orange'；
作用域：$apply（函数（）{
scope.setWidth（Math.round（（Math.random（）*100）+100））；
});
}
view.onFrame=函数（事件）{
如果（text.position.x>440）{
text.position.x=-40；
}否则{
text.position.x=text.position.x+3；
}
text.content='形状宽度：'+scope.objectValue.width；
shape.radius=scope.objectValue.width；
作用域：$apply（函数（）{
scope.setMessage（）；
});
}
paper.view.draw（）；
}
}否则{
scope.setMessage（）；
}
}
返回{
链接：链接
}
}]);

但是，如果从DRAW1导航到HOME并返回DRAW1，画布将显示为空白。但是在这一点上触发“添加形状”仍然会为层创建新的子对象

问题2（演示中的绘图2）

通过删除此行

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

if（scope.objectValue.count<1）{
//…纸张设置。。。
}

纸张每次装入时都会在DRAW2中设置

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

谢谢

---

感谢您的建议。

您正在

链接

功能中创建新的纸面项目，该功能每次使用指令时都会运行，尤其是每次生成新视图时

如果您希望它只运行一次，您可以将其放入指令的

编译

函数中，或者放入专用的

角度服务

中，或者不关闭/重新打开视图

后者可以简单地使用

ng show/ng hide

将视图保留在DOM中，而不是更改路由