GooFlow流程图绘制插件_gdi流程图资源-CSDN文库

共34个文件

png：12个

js：7个

html：4个

版权申诉

GooFlow

流程图

绘制插件

127 浏览量 2020-06-10 13:41:05 上传评论 1 收藏 433KB ZIP 举报

《GooFlow流程图绘制插件：打造高效流程设计体验》在信息技术高速发展的今天，流程图作为一种清晰表达逻辑关系的工具，已经被广泛应用于各个领域，包括项目管理、软件设计、业务流程分析等。而GooFlow流程图绘制插件正是这样一款专为提升流程设计效率而生的利器，它以其独特的特性，简洁的操作界面和强大的功能，深受用户喜爱。 GooFlow流程图绘制插件基于jQuery技术，使得其能够无缝集成到网页中，为用户提供在线绘制流程图的服务。这意味着用户无需下载安装任何额外软件，只需打开网页，即可开始绘制流程图，大大降低了使用的门槛。同时，jQuery的高性能和广泛兼容性，保证了GooFlow在各种浏览器和设备上的良好运行效果。该插件的一大亮点在于其丰富的图形节点库。用户可以在面板上自由添加各种形状的节点，如开始/结束节点、决策节点、操作节点等，这些图形节点直观地代表了流程中的不同步骤和状态。通过简单的拖拽和放置，用户可以快速构建出复杂的流程结构。此外，GooFlow还提供了多种样式和颜色选项，使流程图更加美观且易于理解。连接线是流程图中不可或缺的部分，GooFlow提供了灵活的箭头工具，用户可以轻松地用箭头将各个节点连接起来，表示流程的走向和顺序。这些箭头不仅可以调整长度和角度，还可以添加条件或注释，使得流程图的信息传递更为精准。 GooFlow流程图绘制插件的另一大优势是其强大的编辑和保存功能。用户可以随时修改已有的流程图，添加或删除节点，调整布局，所有的更改都会实时保存。而且，GooFlow支持导出流程图为常见的图像格式（如PNG、JPG），方便在报告或演示文稿中使用，甚至可以生成SVG矢量图，确保在放大时仍保持清晰。在实际应用中，GooFlow不仅适用于个人用户，也适合团队协作。团队成员可以共享流程图，共同编辑，提高工作效率。此外，对于教育领域，GooFlow也是教授流程图概念、训练学生思维能力的实用工具。 GooFlow流程图绘制插件以其便捷性、灵活性和实用性，成为在线流程图设计的理想选择。无论是专业人士还是初学者，都可以借助GooFlow轻松地创建出专业级别的流程图，从而更好地理解和传达复杂的工作流程。通过免费下载和使用GooFlow，你将开启一个高效、直观的流程设计新体验。

资源推荐

资源详情

资源评论

收起资源包目录

GooFlow流程图绘制插件.zip （34个子文件）

GooFlow流程图绘制插件

GooFunc.js 3KB

images

default.css 551B

jquery.min.js 91KB

index.html 4KB

json2.js 3KB

GooFlow

demo2.html 5KB

未命名-3 - 副本.png 73KB

bullet_blue.png 45KB

GooFlow_line_oper.png 43KB

codebase

GooFlow.js.bak 76KB

GooFlow_color.js 291B

GooFlow2.css 9KB

GooFlow.css 9KB

GooFlow.js 80KB

img

gooflow_blank2.htm 571B

gooflow_icon2.png 2KB

GooFlow_line_oper.png 652B

gooflow_bullet.png 1KB

gooflow_blank.gif 70B

gooflow_bg.png 249B

gooflow_blank2.gif 62B

gooflow_icon.png 6KB

gooflow_btn_bg.png 336B

gooflow_tip.png 218B

Thumbs.db 14KB

GooFlow.css.bak 9KB

未命名-3.png 81KB

demo.html 2KB

设计器API说明书.doc 294KB

ui-icons_222222_256x240.png 41KB

child.js 4KB

demo_child.html 2KB

data.js 5KB

Thumbs.db 23KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>流程图DEMO</title>  <link rel="stylesheet" type="text/css" href="codebase/GooFlow2.css"/>  <style> .myForm{display:block;margin:0px;padding:0px;line-height:1.5;border:#ccc 1px solid;font: 12px Arial, Helvetica, sans-serif;margin:5px 5px 0px 0px;border-radius:4px;} .myForm .form_title{background:#428bca;padding:4px;color:#fff;border-radius:3px 3px 0px 0px;} .myForm .form_content{padding:4px;background:#fff;} .myForm .form_content table{border:0px} .myForm .form_content table td{border:0px} .myForm .form_content table .th{text-align:right;font-weight:bold} .myForm .form_btn_div{text-align:center;border-top:#ccc 1px solid;background:#f5f5f5;padding:4px;border-radius:0px 0px 3px 3px;} #propertyForm{float:right;width:260px} </style> <script type="text/javascript" src="child.js"></script> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript" src="../GooFunc.js"></script> <script type="text/javascript" src="../json2.js"></script> <link rel="stylesheet" type="text/css" href="../default.css"/> <script type="text/javascript" src="codebase/GooFlow.js"></script> <script type="text/javascript" src="codebase/GooFlow_color.js"></script> <script type="text/javascript"> var property={ width:1200, height:600, toolBtns:["start round","end round","task round","node","chat","state","plug","join","fork","complex mix"], haveHead:true, headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true，则定义HEAD区的按钮 haveTool:true, haveGroup:true, useOperStack:true }; var remark={ cursor:"选择指针", direct:"结点连线", start:"入口结点", "end":"结束结点", "task":"任务结点", node:"自动结点", chat:"决策结点", state:"状态结点", plug:"附加插件", fork:"分支结点", "join":"联合结点", "complex mix":"复合结点", group:"组织划分框编辑开关" }; var demo; $(document).ready(function(){ demo=$.createGooFlow($("#demo"),property); demo.setNodeRemarks(remark); demo.onItemDel=function(id,type){ if(confirm("确定要删除该单元吗?")){ this.blurItem(); return true; }else{ return false; } } demo.loadData(jsondata); demo.onItemFocus=function(id,model){ var obj; $("#ele_model").val(model); $("#ele_id").val(id); if(model=="line"){ obj=this.$lineData[id]; $("#ele_type").val(obj.M); $("#ele_left").val(""); $("#ele_top").val(""); $("#ele_width").val(""); $("#ele_height").val(""); $("#ele_from").val(obj.from); $("#ele_to").val(obj.to); }else if(model=="node"){ obj=this.$nodeData[id]; $("#ele_type").val(obj.type); $("#ele_left").val(obj.left); $("#ele_top").val(obj.top); $("#ele_width").val(obj.width); $("#ele_height").val(obj.height); $("#ele_from").val(""); $("#ele_to").val(""); } $("#ele_name").val(obj.name); return true; }; demo.onItemBlur=function(id,model){ document.getElementById("propertyForm").reset(); return true; }; }); var out; function Export(){ document.getElementById("result").value=JSON.stringify(demo.exportData()); } </script> </head> <body style="background:#EEEEEE"> <div id="demo" style="margin:5px;float:left"></div> <form class="myForm" id="propertyForm"> <div class="form_title">属性设置</div> <div class="form_content"> <table> <tr><td class="th">Id：</td><td><input type="text" style="width:120px" id="ele_id"/></td></tr> <tr><td class="th">Name：</td><td><input type="text" style="width:120px" id="ele_name"/></td></tr> <tr><td class="th">Type：</td><td><input type="text" style="width:120px" id="ele_type"/></td></tr> <tr><td class="th">Model：</td><td><input type="text" style="width:120px" id="ele_model"/></td></tr> <tr><td class="th">Left-r：</td><td><input type="text" style="width:120px" id="ele_left"/></td></tr> <tr><td class="th">Top-r：</td><td><input type="text" style="width:120px" id="ele_top"/></td></tr> <tr><td class="th">Width：</td><td><input type="text" style="width:120px" id="ele_width"/></td></tr> <tr><td class="th">Height：</td><td><input type="text" style="width:120px" id="ele_height"/></td></tr> <tr><td class="th">From：</td><td><input type="text" style="width:120px" id="ele_from"/></td></tr> <tr><td class="th">To：</td><td><input type="text" style="width:120px" id="ele_to"/></td></tr> </table> </div> <div class="form_btn_div"> <input type="reset" value="重置"/> <input type="button" value="确定" onclick="alert(demo.$focus)"/> </div> </form> <div style="clear:both"> <input id="submit" type="button" value='导出结果' onclick="Export()"/> <textarea id="result" row="6"></textarea> </div> </body> </html>

评论收藏

内容反馈

版权申诉