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;}