小编Jas*_*son的帖子

基于两个D3示例:强制布局(http://bl.ocks.org/mbostock/1095795)和聚集力布局(http://bl.ocks.org/mbostock/1748247),我设法构建了一个力布局用几个独立的重力点来控制节点之间链路顶部的位置.

// Set up map
function map_init(){

    force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width, height])
        .on("tick", tick);

    svg = d3.select("#map").append("svg")
        .attr("width", width)
        .attr("height", height);

    link = $map.selectAll(".link");
    node = $map.selectAll(".node");

    d3.json("graph.json", function(error, graph) {

        // set up nodes
        for( i = 0; i < graph.nodes.length; i++ ){          
            nodes.push( graph.nodes[i] );
        }

        // position nodes to three different gravity centres based on theme
        for( i = 0; i < nodes.length; i++ ){
            if ( nodes[i].theme == "theme1" ){ …

我们的想法是在简单的画布游戏开发中使用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 …