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）{properties and methods};那会有意义吗？我开始沿着这条路走下去，但后来我觉得我不知道下一步该做什么......

//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等），参见代码中的注释
Diagram构造函数接受一个html id选择器和一个可选的spec对象文字（spec.width和spec.height）
Diagram对象会释放一个允许
的公共API
- 通过addState方法向图表添加新节点（请参阅代码中的注释）
- 通过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);

使用构造函数来帮助填充Raphael＆amp; joint.js功能

1 个答案: