joint.js 第一章

//初始化绘图板
function Paper() {
    var graph = new joint.dia.Graph;        //生成画板
    var paper = new joint.dia.Paper({       //生成画布
        el: $('#display_box'),
        width: 800,
        height: 500,
        model: graph,
        gridSize: 1
    });

    var cell1=getShape(1);//获取图形

    graph.addCells([cell1]);

}

//构建形状，可以根据条件创建

function getShape(index,addnew){
    var cell;

    cell=getRect(0,0,'rgb(238,244,247)','矩形',100,50);

return cell;
}

/**
 * 生成矩形
 * px  x 坐标
 * py  y 坐标
 * pbackground   背景色
 * ptext  显示文本
 * pwidth 宽带
 * pheight 高度
 */
function getRect(px, py, pbackground, ptext,pwidth,pheight){
    var cell = new joint.shapes.basic.Rect({
        position: {
            x: px,
            y:py
        },
        size: {
            width: pwidth,
            height: pheight
        },
        attrs: {
            //attr SVG attr      prop- custom data
            rect: {
                fill:pbackground,
                'stroke': 'black',
                'stroke-width': '1px'

            },
            text: {
                text: ptext,
                fill: 'black'
            }
        }
    });
    return cell;

}