HTML5流程图拖拽定义JS插件

HTML5流程图拖拽定义JS插件源码下载

看看谁在用

查看文件目录结构

文件大小:0.00M

素材分类: 插件- Canvas动画

更新时间:2021-07-21

diagramflow.js是一个JavaScript库,画一个交互式,可编辑流程图代表工作流、决策、复杂的过程等等。

创建一个流程
var Figures={
    Rectangle:function(ctx,node){
        ctx.beginPath();
        ctx.fillStyle=node.fillStyle;
        ctx.strokeStyle="blue";
        ctx.fillRect(node.x, node.y, node.w, node.h);
        ctx.fillStyle="black";
        ctx.font="10px Verdana";
        ctx.textBaseline="top";
        node.textfill(ctx);
    },
    Circle:function(ctx,node){
        ctx.beginPath();
        ctx.fillStyle=node.fillStyle;
        ctx.ellipse(node.x+node.w/2,node.y+node.h/2, node.w/2, node.h/2, 0, 0, 2 * Math.PI);
        ctx.fill();
        node.textfill(ctx);
    },
    Diamond:function(ctx,node){
        ctx.beginPath();
        ctx.fillStyle=node.fillStyle;
        ctx.moveTo(node.x,node.y+node.h/2);
        ctx.lineTo(node.x+node.w/2,node.y);
        ctx.lineTo(node.x+node.w,node.y+node.h/2);
        ctx.lineTo(node.x+node.w/2,node.y+node.h);
        ctx.fill();
        node.textfill(ctx);
    }
}
添加连接器
var optionsInput = {
    dropAllowed:true, 
    dragAllowed:false, 
    radius:7
};
var optionsOutput = {
    dropAllowed:false, 
    dragAllowed:true, 
    radius:7
};
var connectors=[
    new model.connector(0,.25,"input","input1",connectorDecoration1,optionsInput),
    new model.connector(1,.3,"output","output1",connectorDecoration,optionsOutput),
    new model.connector(1,.6,"mixed","mixed connector",connectorDecoration),
];
添加节点和线
model.addNode(new model.node(150,10,100,100,connectors,"A Square, dblclick me to edit the text","green","Rectangle"));
model.addNode(new model.node(30,140,100,100,null,"A Circle, click on the center handle to move","white", "Circle"));
model.addLink(new model.link(0,3,1,0,"straight line","straight"));
model.addLink(new model.link(3,4,1,1,"dblclick me to edit","square"));
model.addLink(new model.link(4,2,0,0,"square line","square"));

HTML5流程图拖拽定义JS插件

正在加载文件目录...

Baron下载了 此素材
classic丶下载了 此素材
Praves下载了 此素材
′杨森破先生。下载了 此素材
用户5359382894下载了 此素材
月照花林下载了 此素材
快乐芬芬的小窝下载了 此素材
ID597481下载了 此素材
战天下下载了 此素材
出水云龙下载了 此素材

也许你还喜欢

  1. jQuery工业流程图插件jsPlumb
  2. 纯css绘制的审批流程图样式代码
  3. vuejs流程图树菜单
  4. jsPlumb流程图网页组件
  5. JavaScript汽车仪表盘网页插件
  6. css组织机构多级拓扑图代码
  7. jQuery流程图制作插件
  8. antx6拖拽流程图自定义
简单的文字注释js插件
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器