使用構造函數來填充Raphael＆joint.js功能

Question

我使用joint.js構建活動圖，它擴展了raphael.js。這很簡單，這裏是一個例子。在本例中，var r創建raphael紙並將其附加到標識的div ID。 c1，c2，c3創建圖框。 x.joint（y）函數在創建的對象之間繪製連接器。

var r = Raphael("activity1", 500, 500), 
c1 = r.rect(40, 40, 50, 50, 10), 
c2 = r.rect(140, 140, 50, 50, 10); 
c3 = r.rect(240,40,50,50,10); 
c1.joint(c2); 
c2.joint(c3); 
c1.joint(c3); 

現在 - 我想要做的事情仍然有點讓我困惑，因爲有人仍在學習，因爲我用javascript去。我可以輕鬆地繼續做我上面做的事情。然而，我想要做的是爲圖創建一個構造函數，然後使用構造函數更容易地填充圖。

我將如何去創建函數diagNode（params）{屬性和方法};這在這裏有意義嗎？我開始沿着這條道路，但後來我覺得我不知道接下來該怎麼辦......

//create a new constructor for diagram nodes 
function diagNode(xStart,yStart,Width,Height,Corner){ 
    this.xStart = xStart; 
    this.yStart = yStart; 
    this.wide = Width; 
    this.tall = Height; 
    this.corner = Corner; 
}; 
diag1 = new diagNode(300,100,100,50,10); 

Answer 1

我創建的jsfiddle工作演示here 我創建了兩個簡單的對象節點和圖：

• 節點定義圖的狀態;該構造函數接受一個規範文本對象（spec.uid，spec.x，spec，y等），參見代碼
• 中的註釋Diagram構造函數接受一個html id選擇器和一個可選spec對象文字（spec.width和spec。高度）

• 的Diagram對象exspose該permitt到

  • 新節點添加到由addState法圖（見在代碼註釋）
  • 添加節點的數組到一個公共API圖由addStates方法（參見代碼中的註釋）
  • 聯合二由jointState法節點（見代碼註釋）
  • 由searchState法
  搜索在圖表中的節點

CODE：

/* 
** Node constructor 
** crate a new Node (or state diagram) 
** 
** @params {object} spec the specification object (spec.x,spec.y,spec.width,spec.height, spec.radius 
** 
** @return NodeObject 
*/ 
var Node = function(spec) { 
    spec = spec || {}; 
    //uid usefull for search this node in a diagram 
    this.uid = spec.uid || 0; 
    this.x = spec.x || 0; 
    this.y = spec.y || 0; 
    this.width = spec.width || 0; 
    this.height = spec.height || 0; 
    this.radius = spec.radius || 0; 
}; 

/* 
** Diagram constructor 
** 
** @params {object} selector the paper selector 
** 
** @return Diagram Object 
*/ 
var Diagram = function(selector, spec) { 
    //relay on default value if spec is undefined 
    var defaultSpec = { 
     width: 500, 
     height: 500 
    }, 
     dWidth = spec.width || defaultSpec.width, 
     dHeight = spec.height || defaultSpec.height; 

    //define the paper property 
    this.paper = Raphael(selector, dWidth, dHeight); 

    //define the state array; usefull for search node in diagram 
    this.states = []; 

}; 

Diagram.prototype = { 
    //inefficent method to search a state by UID in array 
    //TODO:optimize! 
    searchState: function(stateId) { 
     var instance = this, 
      i = 0, 
      max = this.states.length, 
      currentState, find = false, 
      selectedState; 

     //search the stateId params in diagram states array 
     for (; i < max; i++) { 
      currentState = instance.states[i]; 
      if (currentState.node.uid === stateId) { 
       find = true; 
       selectedState = currentState; 
      } 
     } 


     //return the response object 
     return selectedState; 

    }, 

    //add single state (Node) to diagram  
    addState: function(node) { 
     //create a rect shape with state param spec 
     var state, 
      stateShape = this.paper.rect(node.x, node.y, node.width, node.height, node.radius); 

     state = { 
      node : node, 
      shape: stateShape 
     }; 
     //add state to array 
     this.states.push(state); 

     return this; 
    }, 

    //add an array of states (Node) to diagram  
    addStates: function(stateArray) { 
     var instance = this, 
      i = 0, 
      max = stateArray.length, 
      currentState; 
     for (; i < max; i++) { 
      currentState = stateArray[i]; 
      instance.addState(currentState); 
     } 
     return this; 
    }, 

    //join two states 
    jointState: function(sourceState, destinationState) { 
     var source = this.searchState(sourceState.uid), 
      dest = this.searchState(destinationState.uid); 


     //joint only if all the states passed to the function, already exist in the diagram  
     if (source && dest) { 
      source.shape.joint(dest.shape); 
     } 
     return this; 
    } 
}; 


//code 
// define nodes (or states) 
var c1 = new Node({ 
    uid: 1, 
    x: 50, 
    y: 40, 
    width: 50, 
    height: 50, 
    radius: 10 
}), 
    c2 = new Node({ 
     uid: 2, 
     x: 150, 
     y: 140, 
     width: 50, 
     height: 50, 
     radius: 10 
    }), 
    c3 = new Node({ 
     uid: 3, 
     x: 250, 
     y: 50, 
     width: 50, 
     height: 50, 
     radius: 10 
    }), 
    c4, 
    // define an array of state to optionally pass to addStates Diagram function 
    allStates = [c1, c2, c3], 
    myDiag; 
//create the diagram passing allStates array and settings node (state) joins 
myDiag = new Diagram("activity1", 500, 500).addStates(allStates).jointState(c1, c2).jointState(c2, c3).jointState(c1, c3); 

//later create anothe node 
c4 = new Node({ 
    uid: 4, 
    x: 350, 
    y: 150, 
    width: 50, 
    height: 50, 
    radius: 10 
}); 

//add node to diagram 
myDiag.addState(c4); 
//join c3 to c4 
myDiag.jointState(c3, c4);