생성자를 사용하여 Raphael 및 joint.js 기능을 채우기 위해

Question

나는 raphael.js를 확장하는 joint.js을 사용하여 활동 다이어그램을 작성합니다. 그것은 매우 간단합니다, 여기 예제가 있습니다. 이 예제에서 var r은 라파 종이를 만들고 식별 된 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); 

지금 - 내가하고 싶은 것은 여전히 ​​조금 혼란 스럽습니다. 아직 자바 스크립트로 배우는 사람입니다. 위의 작업을 계속 쉽게 수행 할 수 있습니다. 그러나 대신 다이어그램의 생성자를 만든 다음 생성자를 사용하여 다이어그램을 좀 더 쉽게 채울 수 있습니다.

함수 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 리터럴 객체 (spec.uid, spec.x, spec, y 등)를 허용합니다. 코드의 주석을 참조하십시오.
• 다이어그램 생성자는 html id 선택기와 선택적 spec 객체 리터럴 (spec.width 및 spec. 높이)

• 는 다이어그램 객체는

• 가에 노드의 배열을 추가) 코드의 주석을 참조합니다 (addState 방법으로 그림을 새로운 노드를 추가
  • 에 출력 허가 공용 API를 exspose addStates 메소드 다이어그램 (코드의 주석 참조)
  • 조인트 2 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);