jsplumb拖线_基于jsplumb插件制作可拖拽、保存流程图、重绘保存后的流程图总结...

1.重点参考博文

https://blog.csdn.net/j_bean/article/details/78092647

2.关键点总结

1)实现可视区域图形画满后,拖动整个画布的效果

a.最好不要给画图形的容器预设置很大的宽、高,这样遇到钻牛角尖的用户还是会将画布拖到边界。

b.换个思维,拖动画布时,修改画布上画好的图形的left、top值。比如向右拖动时,增大画布上画好的

所有图形left值。这样看起来的效果好像画布像右动了,其实本质上是画布上东西像右了,而画布并

没有真的移动。

而且这样实现后,无论用户像哪个方向拖动,永远也拖不到尽头

c.修改画好的图形的css样式后,记得最后调用jsPlumb.repaintEverything(),来重新绘制画面。

否则端点会与图形脱离。

d.鼠标拖动效果如果不借助任何插件,可以用onmousedown、onmousemove、onmouseup三个事件共同

配合实现。

onmousedown当鼠标按下:设置按下标志置为true,并记录当前的鼠标指针的位置

onmousemove当鼠标移动:判断鼠标按下标志,如果按下了,则开始拖动逻辑(即修改被拖动

元素的css样式)。用当前鼠标位置和onmousedown事件记录的位置就能

计算出拖动的距离。

onmouseup当鼠标抬起:将鼠标按下标志置为false

2)jsPlumb.bind()方法可以给线绑定事件

3)两个图形之间只能画1条线的效果

jsPlumb.bind("connection", function (conn, originalEvent) {

//查看被连接的两个点间是否已经连接过

var conns=jsPlumb.getConnections({

source:conn.sourceId,

target:conn.targetId

});

//如果大于1条,则不在进行连接

if(conns.length>1){

jsPlumb.detach(conn);

}

});

4)当一个图形上有多个点,用jsPlumb.connect()方法控制画具体哪两个端点间的线,使用uuids

a.  jsPlumb.connect( {uuids:[sourceUUid,targetUUid]} )//画具体哪两个点间的线

jsPlumb.connect( {source:123,target:456} )//用这个时jsplumb会随机的选择图形上的两个端点进行连接

b.  uuid属于endpoint,uuid在添加端点时指定

var  port = jsPlumb.addEndpoint(id, { anchors: "TopCenter",uuid:123456789}, upport);

port.getUuid()//获得端点的uuid

3)重要api

connection.getUuids()//获得连接线两个端点的UUID,返回为一个数组 [sourceUuid, targetUuid]

jsPlumbUtil.uuid() //生成id

4)放大缩小

https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/section1.html

---------------------

作者:join_null

来源:CSDN

原文:https://blog.csdn.net/join_null/article/details/80266993

版权声明:本文为博主原创文章,转载请附上博文链接!

原文:https://www.cnblogs.com/zzsdream/p/10913815.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/554402.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PP视频如何更改截图保存路径及图片类型

这篇文章主要说的是PP视频如何更改截图保存路径及图片类型,希望可以帮助大家。PP视频采用了先进的P2P流媒体播放技术,PP视频可以确保在大量用户同时观看节目的情况下,节目依然流畅清晰。PP视频是一个高品质的视频网站,PP视频依靠独…

win连接被远程计算机终止,windows系统远程连接后马上断开提示“远程计算机已结束连接”的解决方法...

原标题:windows系统远程连接后马上断开提示“远程计算机已结束连接”的解决方法此问题在远程系统是GHOST版的windowsxp和winserver2003时出现的比较普遍。现象描述:用windowsxp自带的“远程桌面”功能连接到另外一台windowsxp电脑时,在连接的…

搜狐视频怎么开启青少年模式

很多人都使用搜狐视频,播放器家园网小编给大家分享一下搜狐视频怎么开启青少年模式相关内容。搜狐视频播放器是一款深受广大用户欢迎的主流视频播放器软件,专注为用户提供在线视频播放的客户端软件,搜狐视频播放器为用户提供清晰、流畅、界面…

使用中断后不停止_乔丹体育公司构成侵权,为何又不判令彻底停止使用“乔丹”注册商标?法院解释来了...

2020年12月30日,上海二中院发布了迈克尔•乔丹姓名权纠纷案一审判决结果,引发社会各界广泛关注。现就大家关注的若干问题作如下释疑:1. 为何认定乔丹体育公司构成侵权乔丹体育公司是在明知迈克尔•乔丹具有较高知名度的情况下,仍然…

如何在家访问公司的文件服务器,企业的共享文件,该怎么高效管理?

原标题:企业的共享文件,该怎么高效管理?现在的企业基本上都有自己的文件服务器,并且会经常共享文件让局域网内用户访问。而企业的网络服务器共享文件是企业的无形资产和商业保密信息,员工也经常根据网络服务器来远程控…

roads 用户体验标准_全球领先技术加持,联发科 天玑1000+刷新5G用户体验新标准...

随着5G基站的一步步铺建,越来越多的地方都逐渐可以接收到5G信号了。这自然也催促着芯片厂商尽快推出全新的5G移动平台,比如骁龙的X55基带、华为的巴龙5000基带等。但在目前的环境下,尽管这些基带的加入让手机移动平台能够支持5G网络&#xff…

window系统服务器改名,微软:不会将 Windows Server 改名为 Microsoft Server 系统

原标题:微软:不会将 Windows Server 改名为 Microsoft Server 系统IT之家 4 月 18 日消息 外媒 MSPoweruser 报道,微软已经迅速行动,粉碎了一个传闻,此前有消息称,微软正计划将 Windows Server 更名为 Micr…

腾讯视频视频下载_如何下载腾讯视频

今天继续给大家分享腾讯视频方面的内容。一般来说vip会员可以提前点播热播剧,对于追剧党来说是非常好的,不过是否开通也要根据自己需求,毕竟价格也不低啊,而且还是有一些用户能够通过一些简单但不值得提倡的方法看遍全网vip资源电…

deebot扫地机器人使用_完美主义的双子座也选这款扫地机——小米米家扫地机器人使用心得...

赵女士是一枚85后,热爱生活、完美主义、中度洁癖。自从搬了新家后,赵女士一直想添置一台扫地机器人,一方面,孩子经常喜欢赤脚在家中玩耍,另一方面,白天上班晚上回来打扫卫生总显得有些心有余而力不足&#…

腾讯视频如何下载视频_腾讯视频如何做明星装扮

这篇文章主要说的是腾讯视频如何下载视频_腾讯视频如何做明星装扮,希望可以帮助大家。腾讯视频时刻为您推荐最新最火的视频,精彩不断随时观看。支持各种画质的下载,没网也能享受高视觉的享受,让生活的每一刻都不再枯燥!腾讯视频采…

路畅畅云固件升级教程_斐讯K2P MTK版简单几步刷入breed教程,附刷第三方固件方法...

教程适用于 K2P MTK版本(A1/A2)。教程转载自恩山1、检查路由固件版本,是否V22.8.5.189或V22.10.2.24,版本低于22.8.5.189就手动上传升级一下。2、下载辅助工具刷入breed。下载辅助工具,解压压缩文件到任意目录。解压后保留一下几个文件&#…

腾讯视频下载安装_如何上传视频到腾讯视频平台

播放器软件很多,本文小编给大家推荐腾讯视频。我们可以在腾讯视频播放器上,观看各种电视剧、电影、综艺节目等内容。里面的大部分视频都是免费的,部分独播大剧可能会存在vip收费的情况,这也是无法避免的。腾讯视频客户端是国内领先…

edtext 从右边开始输入 安卓_FreeRTOS 从入门到精通6--详解任务管理下(对比PLC,安卓)...

接着上一讲奔腾的心:FreeRTOS 从入门到精通5--详解任务管理上​zhuanlan.zhihu.com在这一讲中我将要介绍任务的运行模式,同时与可编程控制器(PLC)以及安卓系统的运行模式进行比较。我在德国读书时专业是嵌入式开发,工作…

礼物

礼物——大熊和小兔喜欢互送礼物,朋友总是这样。小兔给大熊送礼物有一个习惯—试试看。有一次,小兔送给大熊一本漫画书。 “哇,漫画书!”大熊马上接过书翻看起来。小老虎也围过来看,刚翻两页,小老虎就叫起来&#xff…

ps去水印教程_ps去水印教程,详细解析五种去水印的方法

平常我们从一些素材网站下载图片的时候,不免会带上一些水印,使图片的整体美感下降不少,今天教同学们五种去除水印的方法,相信你学习以后,有所收获,遇到喜欢的图片可以把不想要的水印去掉,不过水…

腾讯视频真实下载地址_腾讯视频如何多倍速播放视频

腾讯视频官网版是一款专注视频播放的客户端软件,您可运行腾讯视频,在线享受奇艺网站内全部免费高清正版视频。腾讯视频视频播放器内容丰富,影视更新快,包含腾讯视频所有的视频内容,在线享受腾讯视频站内全部免费高清正…

excel 图片转url_最全总结 | 聊聊 Python 办公自动化之 Excel(下)

聊聊 Python 数据处理全家桶(Memca 篇)点击上方“AirPython”,选择“加为星标”第一时间关注 Python 技术干货!1. 前言前面谈到 Python 处理 Excel 文件最常见的两种方式,即:xlrd/xlwt、openpyxl其中,xlrd/xlwt 这一组…

腾讯视频下载安装链接_腾讯视频怎么上传视频

今天继续给大家分享腾讯视频方面的内容。腾讯视频播放器是腾讯视频官方推出的一款视频客户端,致力于为用户提供高清、流畅、丰富的专业视频服务,在这里您可在线享受腾讯视频网站内全部免费高清正版视频。使用腾讯视频播放器,你可以享受到高清…

burpsuite csrf攻击_CSRF攻击的BurpSuite实战

今天做的是CSRF越权攻击,原理是通过在自己网站或者目标网站,通过模拟发包,替客户端发送请求。环境配置考虑其危害性,虽然不是很大,但是考虑到安全问题,所以本次演示需自己搭建实验环境,主要内容…

手机优酷下载视频怎么保存到手机

有时大家必须把一些视频文件格式下载出来看,防止在沒有总流量的情况下来收看,例如远途消磨时光,就可以收看下载好的视頻是十分非常好的挑选,那麼下边大家讨论一下怎样下载视頻到手机呢? 手机优酷下载视频怎么保存到手机 01、 最…