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

来源：互联网发布：知乎数据接口编辑：程序博客网时间：2024/05/21 07:52

首先看一下官网的案例。
这就限制了我们流程图的走向，要从做往右来，而我要做的项目是从上往下，所以自己研究了一番，做了一个小小的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]);    };

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

0 0