精华内容
下载资源
问答
  • WEB流程图(jquery实现)

    2019-07-27 02:58:58
    NULL 博文链接:https://dcdc723.iteye.com/blog/743546
  • web流程图动态绘制-使用raphael

    热门讨论 2015-09-30 10:17:49
    web流程图动态绘制-使用raphael,具体过程和效果看博文 http://blog.csdn.net/evankaka/article/details/48439017
  • .net,绝不会后悔下载的web纯js流程图,很漂亮的程序而且简单易移植
  • Web流程图.rar

    2020-01-13 17:09:55
    web流程图,这是网页版的流程图。挺不错的,主要是用JS来实现的。感兴趣的朋友来看看。 拖拽工作流,web在线编辑工作流。
  • web 流程图

    2016-07-22 15:52:51
  • 基于js的流程图制作!可以用于毕业设计,生成XML供别的程序调用
  • 摘要:.NET源码,控件组件,流程图组件 简单的WEB流程图组件演示,使用本组件可在web上显示流程图,本组件使用xml文件或xml字串作为数据源,WorkFlowChart_Source为控件源码,在使用上比较简单,包括开始节点,结束结点...
  • 基于HTML5的WEB流程图绘制

    热门讨论 2014-02-18 10:27:43
    基于HTML5的WEB流程图绘制,界面简洁
  • html5 web流程图绘制.rar

    2020-01-13 17:13:20
    基于HTML5的WEB流程图绘制,界面简洁。 实现流程图绘制、拓扑图等自定义绘制功能,具有丰富的的图形选择。
  • web 流程图 设计器

    热门讨论 2012-04-14 19:25:00
    这是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件,是目前国内外最佳的基于web的工作流设计器、工作流流程监视器解决方案。 可广泛应用于包括:电力、军工、煤炭、化工、科研、能源等各种...
  • goJS 绘制web流程图

    千次阅读 2018-01-12 13:52:16
    goJS 绘制web流程图 诉讼流程 body{ background-image: url('${ctxStatic}/modules/front/index/image/bg.jpg'); background-repeat:no-repeat; background-position-x:...

    goJS 绘制web流程图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>诉讼流程</title>
    	<link href="${ctxStatic}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    	<script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script>
    	<script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
    	<link href="${ctxStatic}/modules/front/liucheng/css/jquery.orgchart.css?s=1" rel="stylesheet">
    	<link href="${ctxStatic}/modules/front/liucheng/css/liucheng.css?s=1" rel="stylesheet">
    	<script src="${ctxStatic}/modules/front/liucheng/js/jquery.orgchart.js?s=1"></script>
    	<script src="${ctxStatic}/modules/front/liucheng/js/go.js?s=1"></script>
    
    
    	<style>
    		body{
    			background-image: url('${ctxStatic}/modules/front/index/image/bg.jpg');
    			background-repeat:no-repeat;
    			background-position-x: center;
    			background-position-y: center;
    			background-size: 100% 100%;
    			background-attachment:fixed;
    			-moz-background-size: 100% 100%;
    		}
    		.page-content{
    			min-height: 768px;
    		}
    		.page-header{
    			border-bottom:0px !important;
    		}
    		.page-header h1{
    			color:#fff;
    		}
    
    
    
    
    	</style>
    </head>
    
    <body>
    	<div class="main-content">
    		<div class="page-content">
    			<a id="fanhui" οnclick="javascript :history.go(-1);" class="pull-left btn btn-lg btn-info" >返回</a>
    			<div class="page-header">
    				<h1 class="text-center">诉讼流程</h1>
    			</div>
    			<div class="row row-from">
    				<div class="col-xs-12">
    					<%--<img class="img-responsive center-block" src="${ctxStatic}/modules/front/liucheng/image/liucheng.png" >--%>
    					<!-- flowchart start -->
    
    					<div id="chart-container" class="chart-container" style="width:100%; min-height:768px;"></div>
    					<!-- flowchart end -->
    
    				</div>
    			</div>
    		</div>
    	</div><!-- /.main-content -->
    </body>
    </html>
    
    
    <script type="text/javascript">
    
    	var $ = go.GraphObject.make;//
    
    	var myDiagram =$(go.Diagram, //定义的画布
    			"chart-container",//要渲染的DIV 的Id 名称,1中html中的id
    			{
    				initialContentAlignment: go.Spot.Center,
    				initialAutoScale: go.Diagram.Uniform,
    				contentAlignment: go.Spot.Center,//对齐方式
    				layout://画布里的元素布局方式    
    						$(go.ForceDirectedLayout,{
    							defaultSpringLength: 30,
    							defaultElectricalCharge: 100
    						})
    			});
    
    	myDiagram.layout =
    			$(go.TreeLayout,
    					{ angle: 90, layerSpacing: 35 });
    
    	$(go.TextBlock,{
    		text:"www.peng8.net",
    		stroke: "red",
    		font: "bold 10pt helvetica, bold arial, sans-serif",
    		margin: 2
    	});
    
    
    	myDiagram.nodeTemplate = $(go.Node, "Auto",
    			$(go.Shape, "Rectangle",//形状:一个 圆角矩形 ,默认填充色为 白色,边框颜色为 红色
    					{
    						width:100,
    						height:60,
    						margin: 2,
    						fill: "#5e9cd3",
    						background: '#394',
    						stroke: "#5e9cd3"
    					},
    					new go.Binding("fill", "color")
    			),
    			$(go.TextBlock,//文本
    					{
    						font: "bold 10pt helvetica, bold arial, sans-serif",
    						stroke: "#fff",
    						margin: 2
    					},
    					new go.Binding("text", "text"))//申明动态绑定text属性,将数据源中提供text字段的值赋值给当前的text属性
    	);
    
    	myDiagram.linkTemplate =
    			$(go.Link,
    					{  adjusting: go.Link.Stretch, reshapable: true },
    					new go.Binding("points").makeTwoWay(),
    					$(go.Shape,  //用来画线
    							{
    								isPanelMain: true,
    								strokeWidth: 2,
    								stroke: "#fff"
    
    							}),
    					$(go.Shape,  //用来画箭头
    							{
    								toArrow: "standard",
    								fill: "#fff",
    								stroke: "#fff"
    							}),
    					$(go.TextBlock,  //用来显示线上的label
    							{
    								textAlign: "center",
    								segmentOffset: new go.Point(0, -10),
    								font: "10pt helvetica, arial, sans-serif",
    								stroke: "#555555",
    								margin: 4
    							},
    							new go.Binding("text", "text")
    					)
    			);
    
    
    	var jsonList = {
    		nodeKeyProperty: "key", //关联的主键
    		nodeDataArray: [
    			{key:1,text:"节点1"},
    			{key:2,text:"节点2"},
    			{key:3,text:"节点3"},
    			{key:4,text:"节点4"},
    			{key:5,text:"节点5"},
    			{key:6,text:"节点6"}],//节点数据
    		linkDataArray: [
    			{from:1,to:2},
    			{from:2,to:3},
    			{from:2,to:5},
    			{from:3,to:6},
    			{from:5,to:4}]//点对应关系数据 ,上面from 和to 即 开始节点的主键指向结束节点的主键
    	};
    
    
    	//7.最后就是如何给流程图填充动态数据了,这里我采用了json的方式,流程图赋值就是一句话就够了
    	myDiagram.model = go.Model.fromJson(jsonList);
    
    
    
    	$(function() {
    
    	});
    </script>
    效果图:

    展开全文
  • Web流程图绘制使用raphael

    万次阅读 2015-09-14 15:35:14
    本文要实现一个流程图的绘制,最终的目标是实现流程图的自动绘制,并可进行操作,直接点击流程图上对应的方框就可以让后台跑相应的程序。

              林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

              摘要:本文要实现一个流程图的绘制,最终的目标是实现流程图的自动绘制,并可进行操作,直接点击流程图上对应的方框就可以让后台跑相应的程序。

    本文工程免费下载

    一、插件介绍

       1、图形绘制raphael

          其中图形绘制使用了raphael,下载地址:http://raphaeljs.com,它的功能非常强大。

         中文帮助教程:http://html5css3webapp.com/raphaelApi.htm#Paper.text

    其中有一些DEMO如下:

        


      2、鼠标右键菜单栏弹出smartMenu

        教程及下载地址: http://www.cnblogs.com/ATree/archive/2011/06/30/jQuery-smartMenu-javascript.html

    3、字体大小变化利器插件jquery.fontFlex

        随着页面的放大或者缩小,字体也跟随着放大或者缩小。当然,可以设置一个最大值,一个中间值和一个最小值。此效果多半应用于响应式页面中,或者需要适用多版本终端浏览器的页面中

    二、使用

    1、首先,来看看要实现的流程图的样子。



    2、代码实现

        这里其实就是把上面的插件都引用进来,然后其它的就是用JS不断画椭圆、直线箭头、方框等。

    画好之后,添加文字,给方框添加右键点击事件

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="smartMenu.css" rel="stylesheet">
    <script src="jquery-1.8.1.min.js"></script>
    <script src="jQuery.fontFlex.js"></script>
    <script src="jquery-smartMenu.js"></script>
    <script src="raphael-min.js"></script>
    <script src="jQuery.fontFlex.js"></script>
    
    <style>
    body div{ background:#333333;}
    #paperBox1{ background:#70AD47;}
    .exp1 {color:#FFFFFF;line-height:80px;} 
    rect{cursor:pointer}
    text{cursor:pointer}
    #spinner{ position:absolute;
    left:10px;top:10px;} 
    </style>
    </head>
    <body>
    	<div>
    		<h1 class="exp1">
    			<center>任务计划流程</center>
    		</h1>
    		<!-- 在这上面画图 -->
    		<div id="paper">
    		<div id="paperBox1"></div>		
    		<div id="spinner"></div>		
    		</div>		
    	</div>
    </body>
    <script type="text/javascript">
    $('h1').fontFlex(10, 120, 40);//字体大小自适应
    console.log(Raphael.svg);//查看是否支持Raphael,true为支持
    var window_w = $(window).width();//浏览器窗口可见宽度
    var window_h = $(window).height();浏览器窗口可见高度
    var rect_w = window_w / 8;//矩形的宽
    var rect_h = window_h / 20;//矩形的高
    var rect_r = rect_w / 15;//矩形圆角
    var arrow_h = 35; // 箭头高
    console.log(window_w);
    console.log(window_h);
    console.log(rect_w);
    console.log(rect_h);
    //创建一个画布
    var paper = new Raphael("paper",window_w,window_h + 200);  
    //直线箭头
    var arrow1 = paper.path("M21.786,12.876l7.556-4.363l-7.556-4.363v2.598H2.813v3.5h18.973V12.876z" ).attr({fill: "#5B9BD5", stroke: "none"});
    var arrow2 = arrow1.clone();
    var arrow3_1_1 = arrow1.clone();
    var arrow3_1_2 = arrow1.clone();
    
    var arrow3_2_1 = arrow1.clone();
    var arrow3_2_2 = arrow1.clone();
    var arrow3_2_3 = arrow1.clone();
    
    var arrow3_3_1 = arrow1.clone();
    var arrow3_3_2 = arrow1.clone();
    var arrow3_3_3 = arrow1.clone();
    
    var arrow3_4_1 = arrow1.clone();
    var arrow3_4_2 = arrow1.clone();
    var arrow3_4_3 = arrow1.clone();
    
    var arrow3 = arrow1.clone();
    var arrow4 = arrow1.clone();
    var arrow5 = arrow1.clone();
    var arrow6 = arrow1.clone();
    
    var attr = {
                    fill: "#70AD47",//填充
                    stroke: "none",//边框
                    "stroke-width": 1,
                    "stroke-linejoin": "round"
                };
    //画圆角矩形     
    var rect1 = paper.rect((window_w-rect_w)*0.5,0,rect_w,rect_h,rect_r).attr(attr);
    var rect2 = moveRectToRectDown(paper,rect1);
    
    var rect3_1_1 = paper.rect((window_w-rect_w)*0.2,( arrow_h  + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
    var rect3_1_2 = moveRectToRectDown(paper,rect3_1_1);
    var rect3_1_3 = moveRectToRectDown(paper,rect3_1_2);
    
    var rect3_2_1 = paper.rect((window_w-rect_w)*0.4 ,( arrow_h  + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
    var rect3_2_2 = moveRectToRectDown(paper,rect3_2_1);
    var rect3_2_3 = moveRectToRectDown(paper,rect3_2_2);
    var rect3_2_4 = moveRectToRectDown(paper,rect3_2_3);
    
     var rect3_3_1 = paper.rect(window_w-(window_w-rect_w)*0.4-rect_w,( arrow_h  + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
     var rect3_3_2 = moveRectToRectDown(paper,rect3_3_1);
     var rect3_3_3 = moveRectToRectDown(paper,rect3_3_2);
     var rect3_3_4 = moveRectToRectDown(paper,rect3_3_3);
     
     var rect3_4_1 = paper.rect(window_w-(window_w-rect_w)*0.2-rect_w,( arrow_h  + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
     var rect3_4_2 = moveRectToRectDown(paper,rect3_4_1);
     var rect3_4_3 = moveRectToRectDown(paper,rect3_4_2);
     var rect3_4_4 = moveRectToRectDown(paper,rect3_4_3);
    
    //文字描述
    insertRectText(paper,rect1,"1.等待激活");
    insertRectText(paper,rect2,"2.日切");
    insertRectText(paper,rect3_1_1,"下载文件信息信息");
    
    
    //直接箭头移动
    moveArrowToRectDown(rect1,arrow1,90,2,null,null);
    moveArrowToRectDown(rect2,arrow2,90,2,null,null);
    
    moveArrowToRectDown(rect3_1_1,arrow3_1_1,90,2,null,null);
    moveArrowToRectDown(rect3_1_2,arrow3_1_2,90,2,null,null);
    
    moveArrowToRectDown(rect3_2_1,arrow3_2_1,90,2,null,null);
    //moveArrowToRectDown(rect3_2_2,arrow3_2_2,90,2,null);
    moveArrowToRectDown(rect3_2_3,arrow3_2_3,90,2,null,null);
    
    moveArrowToRectDown(rect3_3_1,arrow3_3_1,90,2,null,null);
    moveArrowToRectDown(rect3_3_2,arrow3_3_2,90,2,null,null);
    moveArrowToRectDown(rect3_3_3,arrow3_3_3,90,2,null,null);
    
    
    moveArrowToRectDown(rect3_4_1,arrow3_4_1,90,2,null,null);
    moveArrowToRectDown(rect3_4_2,arrow3_4_2,90,2,null,null);
    moveArrowToRectDown(rect3_4_3,arrow3_4_3,90,2,null,null);
    //画边框
    var rectbox3 = drawRectToRect(paper,rect3_1_1,rect3_4_4,( arrow_h  + rect_h ) * 0.5);
    var rectbox3_1 = drawRectToRect(paper,rect3_1_1,rect3_1_3,( arrow_h  + rect_h ) * 0.15);
    var rectbox3_2_1 = drawRectToRect(paper,rect3_2_1,rect3_2_2,( arrow_h  + rect_h ) * 0.05);
    var rectbox3_2_2 = drawRectToRect(paper,rect3_2_3,rect3_2_4,( arrow_h  + rect_h ) * 0.05);
    var rectbox3_3 = drawRectToRect(paper,rect3_3_1,rect3_3_4,( arrow_h  + rect_h ) * 0.15);
    
    //对应从积分计算到完
    moveArrowToRectDown(rectbox3,arrow3,90,2,null,18);//最大外框下方箭头
    moveArrowToRectDown(rectbox3_2_1,arrow3_2_2,90,1.1,-8,5);
    var xx = Math.round($(rectbox3.node).attr("y"))*1+$(rectbox3.node).attr("height")*1+15+arrow_h;
    console.log(xx);
    var rect4 = paper.rect((window_w-rect_w)*0.5, xx ,rect_w,rect_h,rect_r).attr(attr);
    moveArrowToRectDown(rect4,arrow4,90,2,null,null);
    var rect5_1 = paper.rect((window_w-rect_w)*0.4 ,( arrow_h  + rect_h ) * 8.5 ,rect_w,rect_h,rect_r).attr(attr);
    var rect5_2 = paper.rect(window_w-(window_w-rect_w)*0.4-rect_w,( arrow_h  + rect_h ) * 8.5,rect_w,rect_h,rect_r).attr(attr);
    var rectbox5 = drawRectToRect(paper,rect5_1,rect5_2,( arrow_h  + rect_h ) * 0.3);
    moveArrowToRectDown(rectbox5,arrow5,90,2,null,18);//外框下方箭头
    var rect6 = paper.rect((window_w-rect_w)*0.5 ,( arrow_h  + rect_h ) * 10 ,rect_w,rect_h,rect_r).attr(attr);
    moveArrowToRectDown(rect6,arrow6,90,2,null,null);//外框下方箭头
    var rect6 = paper.rect((window_w-rect_w)*0.5 ,( arrow_h  + rect_h ) * 11 ,rect_w,rect_h,rect_r).attr(attr);
    
    //arrow2.transform("t650,300r90s4")
    //给矩形增加居中的文字
    function insertRectText(root,rectangle,str){
    	var x = Math.round($(rectangle.node).attr("x"));
    	var y = Math.round($(rectangle.node).attr("y"));
    	var w = $(rectangle.node).attr("width");
    	var h = $(rectangle.node).attr("height");
    	var textStr = root.text(x + w / 2,y + h / 2,str).attr({fill:"#FFFFFF"});
    	textStr.attr({
             "fill":"#FFFFFF",
             "font-size":"15px",
         });
    	rectangle.data("cooperative", textStr);
    }
    //将箭头移动到矩形下方
    function moveArrowToRectDown(rectangle,arrowbox,angle,scale,offset_x,offset_y){
    	var angle = angle == null ?0:angle; //默认旋转90度
    	var scale = scale == null ?1:scale;
    	var offset_y =offset_y ==null?0:offset_y;
    	var offset_x =offset_x ==null?0:offset_x;
    	var x = Math.round($(rectangle.node).attr("x"));
    	var y = Math.round($(rectangle.node).attr("y"));
    	var w = $(rectangle.node).attr("width");
    	var h = $(rectangle.node).attr("height");
    	console.log("x=" + x);
    	console.log("y=" + y);
    	console.log("w=" + w);
    	console.log("h=" + h);
    	var xNew = x + w*0.5 -8*scale + offset_x;
    	var yNew = y + h*1 + offset_y;
    	var pos = "t"+ xNew + "," + yNew + 'r' + angle + 's' + scale;
    	console.log(pos);
    	arrowbox.transform(pos);	
    }
    
    //将一个矩形移动到另一个矩形下方
    function moveRectToRectDown(root,rectangle){
    	var x = Math.round($(rectangle.node).attr("x"));
    	var y = Math.round($(rectangle.node).attr("y"));
    	var w = Math.round($(rectangle.node).attr("width"));
    	var h = Math.round($(rectangle.node).attr("height"));
        var r = $(rect1.node).attr("rx");
    	var rectNew = root.rect(x,y + h + arrow_h,w,h,r).attr(attr);
    	return rectNew;
    }
    
    
    function drawRectToRect(root,rectangle1,rectangle2,offset){
    	var x1 = Math.round($(rectangle1.node).attr("x"));
    	var y1 = Math.round($(rectangle1.node).attr("y"));
    	
    	var x2 = Math.round($(rectangle2.node).attr("x"));
    	var y2 = Math.round($(rectangle2.node).attr("y"));
    	var w2 = Math.round($(rectangle2.node).attr("width"));
    	var h2 = Math.round($(rectangle2.node).attr("height"));
    	x2 += w2;
    	y2 += h2;	
    	return drawRect(root,x1,y1,x2,y2,offset);
    }
    //在一个矩形外画矩形,传入左上角和右下角的位置
    function drawRect(root,x1,y1,x2,y2,offset){
    	var offset =offset == null?0:offset;
    	var x = x1 - offset;
    	var y = y1 - offset;
    	var w = x2 - x1 + 2*offset;
    	var h = y2 - y1+ 2*offset;
    	var rectbox = root.rect(x,y,w,h).attr({stroke: "#F4B183","stroke-width": 1,});	
    	return rectbox;
    }
    
    //更新圆盘
    var spinner;
    function spinner(holderid, R1, R2, count, stroke_width, colour) {
        var sectorsCount = count || 12,
            color = colour || "#fff",
            width = stroke_width || 15,
            r1 = Math.min(R1, R2) || 35,
            r2 = Math.max(R1, R2) || 60,
            cx = r2 + width,
            cy = r2 + width,
            spinner = Raphael(holderid, r2 * 2 + width * 2, r2 * 2 + width * 2),
            
            sectors = [],
            opacity = [],
            beta = 2 * Math.PI / sectorsCount,
    
            pathParams = {stroke: color, "stroke-width": width, "stroke-linecap": "round"};
            Raphael.getColor.reset();
        for (var i = 0; i < sectorsCount; i++) {
            var alpha = beta * i - Math.PI / 2,
                cos = Math.cos(alpha),
                sin = Math.sin(alpha);
            opacity[i] = 1 / sectorsCount * i;
            sectors[i] = spinner.path([["M", cx + r1 * cos, cy + r1 * sin], ["L", cx + r2 * cos, cy + r2 * sin]]).attr(pathParams);
            if (color == "rainbow") {
                sectors[i].attr("stroke", Raphael.getColor());
            }
        }
        var tick;
        (function ticker() {
            opacity.unshift(opacity.pop());
            for (var i = 0; i < sectorsCount; i++) {
                sectors[i].attr("opacity", opacity[i]);
            }
           // r.safari();
            tick = setTimeout(ticker, 1000 / sectorsCount);
        })();
        return function () {
            clearTimeout(tick);
            spinner.remove();
        };
    }
    
    
    
    rect1.node.onclick = function () {
    	rect1.attr("fill", "red");
    	var x = Math.round($(rect1.node).attr("x"));
    	var y = Math.round($(rect1.node).attr("y"));
    	var w = $(rect1.node).attr("width");
    	var h = $(rect1.node).attr("height");
    	var xx = (x*1 + w*1)+"px";
    	var yy = (80 + y+ h/2 -20 )+"px";
    	console.log("xx="+xx);
    	var remove = spinner("spinner",10, 20, 8, 5, "#FFFF00");
    	$('#spinner').css("left",xx);
    	$('#spinner').css("top",yy);
    };
    function change(){
    	var x = Math.round($(rect1.node).attr("x"));
    	var y = Math.round($(rect1.node).attr("y"));
    	var w = $(rect1.node).attr("width");
    	var h = $(rect1.node).attr("height");
    	var xx = (x*1 + w*1)+"px";
    	var yy = (80 + y+ h/2 -20 )+"px";
    	console.log("xx="+xx);
    	//remove();
    	var remove = spinner("spinner",10, 20, 8, 5, "#FFFF00");
    	$('#spinner').css("left",xx);
    	$('#spinner').css("top",yy);
    }
    	
    var imageMenuData = [
    [{
      text: "方法一",
      func: function() {
          alert("方法一")
          rect1.attr("fill", "blue");
         // remove();
          change()
      }
    }, {
      text: "方法二",
      func: function() {
    	  alert("方法二")
    	  rect1.attr("fill", "yellow");
         // remove();
          change()
      }
    }],
    [{
      text: "方法三",
      func: function() {
    	  alert("方法三")
    	  rect1.attr("fill", "#FF84FF");
         // remove();
          change()
      }
    }]
    ];
    //增加右键菜单
    $(rect1.node).smartMenu(imageMenuData, {
    name: "image"    
    });
    $("rect").smartMenu(imageMenuData, {
    	name: "image"    
    	}); 
    $('text').fontFlex(15, 50, 90);//字体大小自适应
    //当浏览器窗口大小改变时,设置显示内容的高度  
                window.οnresize=function(){  
                	//paper.safari()
                }  
    
    </script>
    </html>

    最终效果展示:



    右键点击:


    方法调用后结果:


    本文工程免费下载

    展开全文
  • Web流程图 自动生成

    2016-06-02 10:24:53
    Web流程图 自动生成
  • web流程图JS插件:dagre-d3

    万次阅读 多人点赞 2015-10-13 11:22:59
     看名字就能猜到它是基于D3库的,D3是一个专门用于前端图形绘制的库,dagre-d3就是实现自动布局并且绘制流程图的这么一个东西: Dagre is a JavaScript library that makes it easy to lay out directed graphs ...

            在Github上找到了一个开源项目:dagre-d3.

            看名字就能猜到它是基于D3库的,D3是一个专门用于前端图形绘制的库,dagre-d3就是实现自动布局并且绘制流程图的这么一个东西:

    Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts a front-end to dagre, providing actual rendering using D3.


    上一个简单的Demo:

    // Create a new directed graph
    var g = new dagreD3.Digraph();
     
    // Add nodes to the graph. The first argument is the node id. The second is
    // metadata about the node. In this case we're going to add labels to each of
    // our nodes.
    g.addNode("kspacey",    { label: "Kevin Spacey" });
    g.addNode("swilliams",  { label: "Saul Williams" });
    g.addNode("bpitt",      { label: "Brad Pitt" });
    g.addNode("hford",      { label: "Harrison Ford" });
    g.addNode("lwilson",    { label: "Luke Wilson" });
    g.addNode("kbacon",     { label: "Kevin Bacon" });
     
    // Add edges to the graph. The first argument is the edge id. Here we use null
    // to indicate that an arbitrary edge id can be assigned automatically. The
    // second argument is the source of the edge. The third argument is the target
    // of the edge. The last argument is the edge metadata.
    g.addEdge(null, "kspacey",   "swilliams", { label: "K-PAX" });
    g.addEdge(null, "swilliams", "kbacon",    { label: "These Vagabond Shoes" });
    g.addEdge(null, "bpitt",     "kbacon",    { label: "Sleepers" });
    g.addEdge(null, "hford",     "lwilson",   { label: "Anchorman 2" });
    g.addEdge(null, "lwilson",   "kbacon",    { label: "Telling Lies in America" });

    它渲染出来是这样的:

    http://static.oschina.net/uploads/space/2014/0413/112016_4xcN_723632.png

           这样我们只要把数据处理成对应格式,就可以轻松的自动绘制会流程图.比较给力的是它对数据的支持良好,有多个格式可以选择,而且虽然接口不多,但是对于节点以及线条的操作都有,可以很轻松的改变节点以及线条的样式,这个大家可以看官方的demo.

           另外如果要附加交互事件,可以通过jquery实现,也很容易,我使用bootstrap的tooltip很轻松的就加上去了.感觉还是个很给力的库,而且国内这方面资料感觉不多,分享给大家.

          最后Github地址:    https://github.com/cpettitt/dagre-d3


    原文地址:通过数据自动生成流程图(前端方向)

    展开全文
  • web上显示流程图 比较简单,包括开始节点,结束结点,两种节点框图(节点、容器)和两种特殊线(跳线、返回线), 使用xml文件或xml字串作为数据源,WorkFlowChart_Source为控件源码
  • web流程图demo

    2010-08-19 18:10:23
    基于vml的web流程图demo 有多种图元表示不同的节点。 包括开始节点和结束节点。 仅是前台的demo 存储要添加后台程序。
  • myflow.js流程图插件

    热门讨论 2018-09-11 10:02:08
    jQuery ui基于myflow.js绘制流程图插件,自定义组织架构图图表,拖拽绘制组织架构图表代码。支持分支、节点状态工作流程图表样式代码。效果查看https://blog.csdn.net/qq_29099209/article/details/82621188
  • web前端开发流程图

    2018-12-31 11:47:22
    本资源是是以思维导图的形式展示了关于Web前端项目开发的流程图,很详细,需者自取。
  • activiti工作流程图绘制工具web版,可直接放到tomcat中使用,默认账户/密码为kermit/kermit
  • 1、基于raphael2.0的绘图(内含大量demo) 2、几乎兼容所有浏览器包括ie, firefox,chrome,opera, Safari 3、内含说明文档和演示代码,详见demo...4、可动态拖动图形(贝磁曲线、动态拾色器、图表、地图导航、流程图等)。
  • WEB 纯js 流程图展示

    热门讨论 2012-05-11 09:34:54
    WEB用javascript 生成流程图 可自由定义样式 灵活 方便 简洁
  • web-流程图(网页中制作流程图实例)

    热门讨论 2009-01-15 10:33:00
    web-流程图,这是网页版的流程图。挺不错的,主要是用JS来实现的。感兴趣的朋友来看看。
  • web在线设计流程图

    2019-09-15 21:57:17
    web在线设计流程图
  • 前端比较方便的流程图绘制插件myflow,可结合后台程序,做流程可视化操作使用。
  • Web流程图绘图,兼容IE、FF、Chrome等主流浏览器。提供了各类基础图形
  • 分享一个myflow.js 流程图插件 拖拽工作流 WEB在线编辑工作流
  • 基于web流程设计器,jsplumb+jqueryUI实现,支持拖拽功能,支持主流浏览器,可用于二次开发。
  • 分享一个d3.js 流程图插件 拖拽工作流 WEB在线编辑工作流
  • Web测试流程图

    千次阅读 2018-09-20 17:08:26
    Web测试侧重流程图: 项目开发-测试双v模型: 常见问题: 1、给你项目,你会从哪方面着手测试? 【分析需求,明确测试任务,分析测试范围,制定测试计划和测试用例。】 2、冒烟测试过不了,怎么处理? 【冒烟测试...
  • mxGraph是一款基于web的绘制流程图的javascript库工具

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 327,278
精华内容 130,911
关键字:

web流程图