jointJS(二）--jointJS官方版本的一个改造bottomtopmodel

首先看一下官网的案例。
这就限制了我们流程图的走向，要从做往右来，而我要做的项目是从上往下，所以自己研究了一番，做了一个小小的demo。

joint.shapes.devs.TopBottomModel = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {

    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><rect class="imgcircle" /><image class="icon"/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',

    defaults: joint.util.deepSupplement({

        type: 'devs.TopBottomModel',
        size: {
            width: 1,
            height: 1
        },

        inPorts: [],
        outPorts: [],

        attrs: {
            '.': {
                magnet: false
            },
            '.body': {
                width: 150,
                height: 30,
                stroke: 'black',
                'rx': 15,
                'ry': 150,
            },
            '.port-body': {
                r: 6,
                magnet: true,
                stroke: 'black'
            },
            text: {
                fill: 'black',
                'pointer-events': 'none',
                'y-alignment': 'middle',
                'x-alignment': 'middle',
            },
            '.imgcircle': {
                width: 40,
                height: 40,
                'ref-x': -5,
                'ref-y': -5,
                ref: '.body',
                'rx': 20,
                'ry': 20
            },
            '.icon': {
                width: 40,
                height: 40,
                'ref-x': 0,
                'ref-y': 0,
                ref: '.imgcircle'
            },
            '.label': {
                text: '',
                'ref-x': 60,
                'ref-y': .2,
                'ref': '.body'
            },

            // CHANGED: find better positions for port labels 
            '.inPorts .port-label': {
                y: -15,
                x: 4
            },
            '.outPorts .port-label': {
                y: 25,
                x: 4
            }
            //
        }

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

    getPortAttrs: function(portName, index, total, selector, type) {
        var attrs = {};
        var portClass = 'port' + index;
        var portSelector = selector + '>.' + portClass;
        var portLabelSelector = portSelector + '>.port-label';
        var portBodySelector = portSelector + '>.port-body';

        attrs[portLabelSelector] = {
            text: portName
        };
        attrs[portBodySelector] = {
            port: {
                id: portName || _.uniqueId(type),
                type: type
            }
        };

        // CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
        attrs[portSelector] = {
            ref: '.body',
            'ref-x': (index + 0.5) * (1 / total)
        };
        // ('ref-dx' => 'ref-dy')
        if(selector === '.outPorts') {
            attrs[portSelector]['ref-dy'] = 0;
        }

        return attrs;
    }
}));

joint.shapes.devs.TopBottomModelView = joint.shapes.devs.ModelView;

自定义一个TopBottomModel，然后再new一个对象，自定义一写属性

var c1 = new joint.shapes.devs.TopBottomModel({
            position: {
                x: params.currentX,
                y: params.currentY
            },
            size: {
                width: 200,
                height: 30
            },
            inPorts: [''],
            outPorts: ['', ''],
            attrs: {
                '.label': {
                    text: params.content,
                },
                '.body': {
                    'rx': 15,
                    'ry': 150,
                },
                '.icon': {
                    'xlink:href': 'img/1.png'//这里是引入图片的地址
                },
                '.imgcircle': {
                    fill: 'rgb(43,142,209)'
                }
            },
        });

        graph.addCells([c1]);

    };

那么这样的话就做成了这样一个小图标，不知道为什么插图插不了，图片挺小的啊。。。总之，那个连线的小圈圈就跑到上下了~