JointJs流程图绘制

最新推荐文章于 2025-03-19 18:29:45 发布

crawling_wl

最新推荐文章于 2025-03-19 18:29:45 发布

阅读量878

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/crawling_wl/article/details/105191925

版权

JointJs流程图绘制

首先我们需要引用几个js和css文件，文件可在jointjs官网进行下载JointJS引用下载，不想去找的话，可以下载我打包好的。https://download.youkuaiyun.com/download/crawling_wl/12282918

<link href="~/Content/JointJs/joint.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Content/JointJs/lodash.js"></script>
<script src="~/Content/JointJs/Backbone.js"></script>
<script src="~/Content/JointJs/joint.js"></script>

定义一个div，相当于一个容器，用来放我们的流程图

<body>
    <div id="paper" class="paper" style="width:1200px;height:600px;"></div>
</body>

最后我们写代码就可以了，这是我写的一个demo，还有更多的shapes，可参考官方文档JointJS官方文档

    var graph = new joint.dia.Graph();

    var ElementView = joint.dia.ElementView.extend({//设定不可以移动
        pointerdown: function () {
            this._click = true;
            joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
        },
        pointermove: function (evt, x, y) {
            this._click = false;
        },
        pointerup: function (evt, x, y) {
            this._click = true;
            if (this._click) {
                this.notify('cell:click', evt, x, y);
            } else {
                joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
            }
        }
    });
    var LinkView = joint.dia.LinkView.extend({
        addVertex: function (evt, x, y) { },
        removeVertex: function (endType) { },
        pointerdown: function (evt, x, y) { }
    });

    //定义画布
    var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: $("#paper").width(),
        height: $("#paper").height(),
        gridSize: 1,
        model: graph,
        elementView: ElementView,
        linkView: LinkView
    });

    //定义形状
    var state = function (x, y, shape, background, text) {
        var cell;
        if (shape === "rect") {
           	cell = new joint.shapes.standard.Rectangle();
        	cell.resize(shapeX, shapeY);
       	 	cell.position(x, y);
        	cell.attr('root/title', '');
        	cell.attr('label/text', text);
        	cell.attr('body/fill', background);
        	cell.attr('body/strokeWidth', '0');
        } else if (shape === "ellipse") {


            cell = new joint.shapes.standard.Ellipse();
        	cell.resize(shapeX, shapeY);
       	 	cell.position(x, y);
        	cell.attr('root/title', '');
        	cell.attr('label/text', text);
        	cell.attr('body/fill', background);
        	cell.attr('body/strokeWidth', '0');
        } else if (shape == "polygon") {//菱形
            cell = new joint.shapes.standard.Polygon();

            cell.resize(100, 70);

            cell.position(x, y);

            cell.attr('root/title', 'joint.shapes.standard.Polygon');

            cell.attr('body/fill', background);

            cell.attr('label/text', text);

            cell.attr('body/refPoints', '0,10 10,0 20,10 10,20');

           // cell.stroke(background);
        }
        graph.addCell(cell);
        return cell;
    };

    //定义连线
    function link(source, target, label) {
        var cell = new joint.shapes.standard.Link({
            source: { id: source.id },
            target: { id: target.id },
            labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': 'bold', 'font-size': '12px' } } }],
            router: { name: 'manhattan' },//设置连线弯曲样式 manhattan直角
            attrs: {
                '.connection': {
                    stroke: '#333333',//连线颜色
                    'stroke-width': 2//连线粗细
                },
                '.marker-target': {
                    fill: '#333333',//箭头颜色
                    d: 'M 10 0 L 0 5 L 10 10 z'//箭头样式
                },
                line: {
                    stroke: '#333333', // SVG attribute and value
                    'stroke-width': 0.5//连线粗细
                }
            }
        });
        graph.addCell(cell);
        return cell;
    }
    //创建元素
    var start = state(200, 100, "ellipse", "yellow", "开始");
    var state1 = state(200, 200, "rect", "yellow", "流程1");
    var state2 = state(100, 300, "rect", "yellow", "流程2");
    var state3 = state(300, 300, "polygon", "yellow", joint.util.breakText("状况判断", { width: 80 }));
    var state4 = state(100, 400, "rect", "yellow", "流程3");
    var state5 = state(300, 400, "rect", "yellow", "流程4");
    var state6 = state(450, 400, "rect", "yellow", "流程5");

    //var state7 = state(650, 400, "rect", "#f7a07b", "add")

    //创建连线
    link(start, state1, "");
    link(state1, state2, "");
    link(state1, state3, "");
    link(state2, state4, "");
    link(state3, state5, "否");
    link(state3, state6, "是");
    //link(state3, state7, "");

    //给所有元素添加点击事件
    paper.on('cell:click', function (e) {
        //可重新渲染cell的属性
         e.model.attr('body/fill', 'red');
		var  tmp = e.model.attr('label/text').replace(/[\r\n]/g, "");//获得流程框中的内容
        //可根据tmp进行判断进行我们的业务流程处理 流程框的内容
    });