Jointjs项目使用总结

关于svg和Jointjs的项目，项目快接近尾声，在此记录一下Jointjs使用心得

1.设置paper的背景

paper = new joint.dia.Paper({

                    

                            el: $('#myholder'),//此处是你要放graph的容器

                             background:{color:'#ffaaaa'},

                            width:paperWidth,

                             

                            height: paperHeight,

                             

                            model: graphRight,

                            drawGrid: true,

                            gridSize: 10 ,

                            linkConnectionPoint:joint.util.shapePerimeterConnectionPoint,

                            defaultLink:paperDefaultLink,

                            linkView:joint.dia.LinkView.extend({

                                     'change':function(){

                                               alert('sourceof the link changed');

                                     }

                            })

                    

                   });

这样设置背景并不管用，需要在myholder的div中设置style的background属性就可以了

可以在paper上设置表格，默认的为点状格

2.如何自定义图形元件

第一步，使用svg基本元素画出元素的形状。ports可以接收连接线的连接。port的位置是根据其中各笔画的相对定位的，以后重新设置size是不会影响相对位置的

//电容
    joint.shapes.basic.DingCapacity = joint.shapes.basic.Generic.extend({
markup: '<g class="scalable"><g class="rotatable">'+
'<rect class="_DingCapacity_hole"/>'+
'<line class="_DingCapacity_topShuLine"/>'+
'<line class="_DingCapacity_topHengLine"/>'+
'<line class="_DingCapacity_bottomHengLine"/>'+
'<line class="_DingCapacity_bottomShuLine"/>'+
'</g></g>',


   defaults: joint.util.deepSupplement({
       type: 'basic.DingCapacity',
       size:{width:leftElementSize,height:leftElementSize},
       attrs: {
       '._DingCapacity_hole':{width:40,height:40,x:0,y:0,'fill-opacity':0},
       '._DingCapacity_topShuLine':{x1:19,y1:0,x2:19,y2:15,stroke: leftElementColor,'stroke-width':elementStrokeWidth,'stroke-width':2},
       '._DingCapacity_topHengLine':{x1:10,y1:15,x2:28,y2:15,stroke: leftElementColor,'stroke-width':elementStrokeWidth,'stroke-width':2},
       '._DingCapacity_bottomHengLine':{x1:10,y1:24,x2:28,y2:24,stroke: leftElementColor,'stroke-width':elementStrokeWidth,'stroke-width':2},
       '._DingCapacity_bottomShuLine':{x1:19,y1:24,x2:19,y2:39,stroke: leftElementColor,'stroke-width':elementStrokeWidth,'stroke-width':2}
       },
       ports:{
        groups:{
    'top':{
    position:{
    name:'absolute',
    args:{x:19,y:0}
    }
    },
    'bottom':{
       position:{
    name:'absolute',
    args:{x:19,y:39}
    }
    }
    },
    items:[
        {
        group:'top',
        attrs:{circle:{magnet:true,r:magnetCircleR,'fill-opacity':leftElementAnchorFillOpacity,'stroke-opacity':0}}
        },
        {
        group:'bottom',
        attrs:{circle:{magnet:true,r:magnetCircleR,'fill-opacity':leftElementAnchorFillOpacity,'stroke-opacity':0}}
        }
        ]
       }
   }, joint.shapes.basic.Generic.prototype.defaults)
});

第二步

     //电容
    var myCapacity = new joint.shapes.basic.DingCapacity({
    position:{x:leftElementWidht/3,y:leftElementHeight*5.5}
    });
graphLeft.addCell(myCapacity);

3.一个元件中有多种port的元件

第一步定义元件

    joint.shapes.basic.DingHorizontalBusbar = joint.shapes.basic.Generic.extend({
    markup: '<g class="scalable"><g class="rotatable">'+
    '<rect class="_DingHorizontalBusbar_hole"/>'+
    '<line class="_DingHorizontalBusbar_hengLine"/>'+
    '</g></g>',


        defaults: joint.util.deepSupplement({
            type: 'basic.DingHorizontalBusbar',
            attrs: {
            '._DingHorizontalBusbar_hole':{width:80,height:horizontalBusbarHeihgt,x:0,y:0,'stroke-opacity':0,'fill-opacity':0},
            '._DingHorizontalBusbar_hengLine':{x1:0,y1:horizontalBusbarHeihgt/2+1,x2:80,y2:horizontalBusbarHeihgt/2+1,stroke: leftElementColor,'stroke-width':elementStrokeWidth},
            magnet:true
            }


        }, joint.shapes.basic.Generic.prototype.defaults)
    });

第二步

    myHorizontalBusbarObject = {
    position:{x: leftElementWidht/3,y:leftElementHeight*6.8},
    size:{width:80,height:horizontalBusbarHeihgt},
    ports:{
    groups:{
    'line':{
    position:{
     name: 'line',
   args: {
       start: { x: 0, y: horizontalBusbarHeihgt/2+1 },
       end: { x: 80, y: horizontalBusbarHeihgt/2+1 }
   }
    },
    attrs:{circle:{magnet:true,r:magnetCircleR,'fill-opacity':leftElementAnchorFillOpacity}}
    },
    'absoluteStart':{
    position:{
    name:'absolute',
    args:{
    x:'0%',
    y:horizontalBusbarHeihgt/2+1
    }
    },
    attrs:{circle:{magnet:true,r:magnetCircleR,'fill-opacity':leftElementAnchorFillOpacity}}
    },
    'absoluteEnd':{
    position:{
    name:'absolute',
    args:{
    x:'100%',
    y:horizontalBusbarHeihgt/2+1
    }
    },
    attrs:{circle:{magnet:true,r:magnetCircleR,'fill-opacity':leftElementAnchorFillOpacity}}
    }
    },
    items:[
{group:'absoluteStart'},{group:'absoluteEnd'}
    ]
    }
    };

    var myBusbar = new joint.shapes.basic.DingHorizontalBusbar(myHorizontalBusbarObject);
graphLeft.addCell(myBusbar);

如果对于创建时候的port不太满意，还可以再添加port

cellViewModel.addPort({group:'line'});

4.在元件中添加元件的一些自定义属性

var VBUSBARINPORTID = "business/VBusBarInportId";

cellViewModel.attr(VBUSBARINPORTID,inportIdName[0]);

这样会出现在对象的