Question

我正在使用raphael.js和javascript创建一个思维导图软件。

我想创建一组节点，其中一个节点就像一个矩形，其属性为id，x，y坐标等。点击矩形上有一个加号图标，创建一个新的节点/矩形以其独特的新ID。我想创建节点并以面向对象的方式为每个创建的节点分配其id。

我很难在每个节点上创建一个唯一的id。我想从0,1,2,3 ...

开始设置ID

第二个困难是选择一个节点。我想根据其id选择一个节点。

请查看以下代码。

有人可以帮我分配每个节点的ID并根据其ID选择每个节点吗？

assume that there is a canvas of 1000px width and 700px height.
       paper = Raphael("canvas", 1000,700);

// create.js

drawNode(290, 80);

function drawNode(x,y)
{
    id=0;
    a =  new node(x,y,id);
    a.drawNode();
}

// nodes.js

var node = function(x,y,id){
    this.id=id; 
    this.x=x;
    this.y=y;

    this.drawNode = function(){
        var st = paper.set();
        a = paper.rect(this.x,this.y, 100, 40, 2);
        a.add = paper.image('images/plus.png', this.x+77,  this.y+12, 20, 20)
        a.attr({fill: '#8EDFF0', stroke: '#6AB0F2'});
        st.push(a,a.text,a.add,a.addnote);
        a.add.click(this.add);
    }

    this.add = function () {
        id=1; 
        a =  new node(this.attrs.x+150, this.attrs.y,id);
        a.drawNode();
    }
}

请告诉我如何为每个节点设置唯一ID，而不是硬编码值以及如何执行此操作。

Answer 1

您可能需要一些NodeCostructor单例，其中id参数从头开始设置为0，而createNode作为接受x和y的函数，使用NodeCostructor＆＃ 39; s id绘制节点并返回一个节点，而不是增加NodeCostructor的id值。它应该是一个基本的例子（编辑：我已经找到了一些js单例教程，所以这个新代码在OOP方面更有效）：

    var NodeConstructor = (function() {
      var instance = null;
      function NCInstanceCreate() {
        var id=0;
        createNode = function(x,y) {
                    tmp = new node(x, y, this.id);
                    this.id++;
                    return tmp;
                }

        return {
          createNode : createNode,
          id : id
        }
      }
      function getInstance() {
        if( ! instance ) {
          instance = new NCInstanceCreate();
        }
        return instance;
      }
      return {
        getInstance : getInstance
      };

    })(window);

    var node = function(x,y,id){
                                this.id=id; 
                                this.x=x;
                                this.y=y; 
            }

    myConstructor=NodeConstructor.getInstance();
    console.log(myConstructor.createNode(100,200));
    console.log(myConstructor.createNode(110,220));
    console.log(myConstructor.createNode(130,240));
    console.log(myConstructor.id);

因此，无论何时想要创建节点，基本上都应该使用myConstructor.createNode（x，y）而不是新节点（x，y，id）。

如何使用javascript OOPS概念为每个节点增加和设置id？

1 个答案: