1

我正在使用扩展 raphael.js 的joint.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);
4

1 回答 1

1

我在这里创建了一个 jsfiddle 工作演示 我创建了两个简单的对象节点和图表：

  • 节点定义图的状态；构造函数接受规范文字对象（spec.uid、spec.x、spec、y 等）查看代码中的注释
  • Diagram 构造函数接受一个 html id 选择器和一个可选的规范对象文字（spec.width 和 spec.height）

  • Diagram 对象公开了一个公共 API，该 API 允许

    • 通过 addState 方法向图中添加新节点（见代码中的注释）
    • 通过 addStates 方法向图中添加节点数组（见代码中的注释）
    • 通过jointState方法连接两个节点（见代码中的注释）
    • 通过 searchState 方法在 Diagram 中搜索一个节点

代码：

/*
** 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);
于 2012-12-17T02:03:13.137 回答