jsplumb流程器使用2

jsplumb默认注册在浏览器的窗口,为整个页面提供静态实例

1. 单独实例化的方法:

var firstInstance = jsPlumb.getInstance();

 内部传入可定义对象   全局定义对象方法: 

    

jsPlumb.importDefaults({···})

 

2. 每次连线,都会导致相关联元素重绘,加载大量数据时 比如执行批量导入切换视图 可以先暂停绘图:

jsPlumb.setSuspendDrawing(true);

jsPlumb.setSuspendDrawing(false,true);

这里的第二个参数的true 会使整个jsplumb立即重绘

也可以使用batch batch 抽象出暂停绘图,执行某些操作,然后重新启用绘图的模式

jsPlumb.batch(fn,[doNotRepaintAfterwards]);

1.7.3版本前方法名:doWhileSuspended

 

3. 本行代码官方文档很模糊 我并不是很清楚放在这里有什么用

jsPlumb.fire('jsPlumbDemoLoaded', instance)

 4. 生成新节点 删除旧节点

jsPlumb.setId(el,newId)
jsPlumb.setIdChanged(oldId,newId)

5. 拖动方法

firstInstance.draggable("some element");

 6. 默认配置

   

Anchor : "BottomCenter",//端点的定位点的位置声明(锚点):left,top,bottom等
Anchors : [ null, null ],//多个锚点的位置声明
ConnectionsDetachable   : true,//连接是否可以使用鼠标默认分离
ConnectionOverlays  : [],//附加到每个连接的默认重叠
Connector : "Bezier",//要使用的默认连接器的类型:折线,流程等
Container : null,//设置父级的元素,一个容器
DoNotThrowErrors  : false,//如果请求不存在的Anchor,Endpoint或Connector,是否会抛出
DragOptions : { },//用于配置拖拽元素的参数
DropOptions : { },//用于配置元素的drop行为的参数
Endpoint : "Dot",//端点(锚点)的样式声明(Dot)
Endpoints : [ null, null ],//多个端点的样式声明(Dot)
EndpointOverlays : [ ],//端点的重叠
EndpointStyle : { fill : "#456" },//端点的css样式声明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//鼠标经过样式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//鼠标经过线的样式
LabelStyle : { color : "black" },//标签的默认样式。
LogEnabled : false,//是否打开jsPlumb的内部日志记录
Overlays : [ ],//重叠
MaxConnections : 1,//最大连接数
PaintStyle : { lineWidth : 8, stroke : "#456" },//连线样式
ReattachConnections : false,//是否重新连接使用鼠标分离的线
RenderMode : "svg",//默认渲染模式
Scope : "jsPlumb_DefaultScope"//范围,标识
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Angular中使用jsPlumb来画流程图,可以通过以下步骤进行操作: 第一步,引入jsPlumb库。你可以通过npm命令安装jsPlumb库,然后将其引入到你的Angular项目中。例如,使用以下命令安装jsPlumb库: ``` npm install jsplumb ``` 在你的组件的.ts文件中,引入jsPlumb库: ``` import * as jsPlumb from 'jsplumb'; ``` 第二步,创建画布。你需要在你的HTML文件中添加一个容元素,用于承载jsPlumb画布。你可以将其定义为一个div元素,并给它一个唯一的id。例如: ```html <div id="myCanvas"></div> ``` 第三步,初始化jsPlumb实例。在你的组件的.ts文件中,创建一个jsPlumb实例,并与画布元素进行绑定。你可以在组件的ngOnInit()方法中进行初始化。例如: ```typescript ngOnInit() { jsPlumb.ready(() => { const instance = jsPlumb.getInstance(); instance.setContainer('myCanvas'); }); } ``` 第四步,添加元素和连接线。你可以在需要添加元素或连接线的地方调用jsPlumb实例的相应方法来实现。例如,要添加一个元素,你可以使用addEndpoint()方法,并传入元素的id和位置等参数。要添加连接线,你可以使用connect()方法,并传入起始元素和目标元素的id。例如: ```typescript jsPlumb.ready(() => { const instance = jsPlumb.getInstance(); instance.setContainer('myCanvas'); const start = instance.addEndpoint('start', { anchors: 'Right' }); const end = instance.addEndpoint('end', { anchor: 'Left' }); instance.connect({ source: start, target: end }); }); ``` 以上就是在Angular中使用jsPlumb来画流程图的基本步骤。你可以根据自己的需求调整画布的样式、元素的位置、连接线的样式等。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值