[英]Using a constructor to help populate Raphael & joint.js functionality
我正在使用joint.js構建活動圖, join.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);
我在這里創建了一個jsfiddle工作演示,並在其中創建了兩個簡單的Objects Node和Diagram:
Diagram對象公開了允許以下操作的公共API:
碼:
/*
** 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.