首页 > 其他分享 >一、jsPlumb实现流程图配置--jsPlumb介绍

一、jsPlumb实现流程图配置--jsPlumb介绍

时间:2024-03-05 18:12:31浏览次数:34  
标签:流程图 Overlay -- 连线 jsPlumb 锚点 节点

jsPlumb是一个前端库,用来实现类似Microsoft Visio的Web端流程图,可以实现拖拽节点,连线,填充文案等方式生成一个流程图。jsPlumb有两个版本,一个是商业版需要收费,另一个是社区版开源免费。目前社区版的最新的文档地址

一、jsPlumb中的基本概念

节点(Node)

节点就是流程图中可以连线或者被连线的单元。形状可以是任意的,例如矩形、圆形或其他不规则的形状。

连线(Connector)

连线就是连接两个节点的线条。连线是有方向的,连线的方向就是从起始点指向目的点。连线有4中线条类型可使用:BezierStraightFlowchartStateMachine




每种连线jsPlumb都提供了一些参数用于设置线条的样式

连线修饰(Overlay)

Overlay是基于连线的,遮盖在连线上一种元素,它可以是文字、图标、图片等任何元素,它可以在连线的任何位置-中间、两边或者连线之外。一条连线上可以有多个Overlay,例如下图:

jsPlumb提供了5种Overlay:Arrow、Label、PlainArrow、Diamond、Custom。Custom类型的允许自定义任何DOM元素作为一个Overlay。

端点(Endpoint)

Endpoint用于控制连线两端的行为与样式。节点上必须先创建端点才能进行连线或被连线。下图实例:


端点的形状以及一些样式,jsPlumb都提供了对应的参数可以进行自定义

锚点(Anchor)

Anchor指定节点上可以用来连线或被连线的位置。Anchor大致又分为静态的和动态的,静态锚点一共有八个点位,如下图:

动态锚点会随着线条连接的两个节点它们之间的相对位置变化而变化,而静态锚点不会。

标签:流程图,Overlay,--,连线,jsPlumb,锚点,节点
From: https://www.cnblogs.com/bencakes/p/18054523

相关文章

  • cmd--net命令
    学校里刚学到net命令,当时课上主要讲的是net的账户管理功能,但之前也碰到过使用net命令来开启mysql这样的网络服务,所以觉得总结一下net命令还是很有必要的!用户管理提权用户:netlocalgroupadministrators用户名/add创建隐藏用户:netuser用户名$网络服务启动netstartmysql......
  • Docker安装Clickhouse
    博客园首页新随笔联系管理订阅随笔-71 文章-1 评论-0 阅读-55274 Docker安装Clickhouse https://clickhouse.com/clickhouse官网https://hub.docker.com/r/clickhouse/clickhouse-server/此为Docker安装Clickhouse官网此为按照命......
  • 密码安全:保护你的数据不被入侵的重要性
    在数字时代,密码安全是保护个人和机构数据的关键。然而,不安全的密码可能导致严重的后果,包括个人隐私泄露、金融损失和声誉受损等。本文将探讨密码安全的重要性,揭示不安全密码的危害,列举一些因密码不安全而发生的真实事件,介绍安全的密码特征以及不安全的密码特征,并提供一些创建......
  • SpringBoot3整合Druid数据源的解决方案
    druid-spring-boot-3-starter目前最新版本是1.2.20,虽然适配了SpringBoot3,但缺少自动装配的配置文件,会导致加载时报加载驱动异常。<dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-3-starter</artifactId><version>1.2.20</version......
  • 基于SWIFT和Qwen1.5-14B-Chat进行大模型全参微调测试
    基于SWIFT和Qwen1.5-14B-Chat进行大模型全参微调测试环境准备基础环境操作系统:Ubuntu18.04.5LTS(GNU/Linux3.10.0-1127.el7.x86_64x86_64)Anaconda3:Anaconda3-2023.03-1-Linux-x86_64根据服务器网络情况配置好conda源和pip源,此处使用的是超算山河源服务器硬件配置:CPU......
  • 释放全球互连的数字潜力!MWC 2024云网高峰论坛召开,中国电信天翼云扬帆起航!
    2月27日,在2024年世界移动通信大会(MWC2024)期间,中国电信云网高峰论坛顺利召开。本次论坛以“释放全球互连的数字潜力”为主题,汇聚全球多个国家和地区的通信业领袖和重量级企业代表,以云为驱、以网为纽,共同探讨释放全球互连的数字潜力。 凝聚共识推动创新竞速全球数字浪潮航程......
  • 数字先锋 | 上云!让“媒”好“发声”
    数字化、信息化为千行百业带来新的发展机遇,传统媒体行业开始加速数字化重构。“十四五”规划提出“推进媒体深度融合,做强新型主流媒体”,为媒体发展路径指明了方向。面对新形势、新要求,中国西藏新闻网(后称“西藏新闻网”)以新闻传播为根本、先进技术为支撑,加快新型主流媒体平台建设......
  • rockylinux8.4更新源更改为国内源
    国内更新如下: 机构链接支持类型带宽备注南京大学mirrors.nju.edu.cnhttp https rsync10000 上海交通大学mirrors.sjtug.sjtu.edu.cnhttps rsync1000 山东大学mirrors.sdu.edu.cnhttp https1000 重庆大学mirrors.cqu.edu.cnhttp https100......
  • KL散度和交叉熵的对比介绍
    KL散度(Kullback-LeiblerDivergence)和交叉熵(CrossEntropy)是在机器学习中广泛使用的概念。这两者都用于比较两个概率分布之间的相似性,但在一些方面,它们也有所不同。本文将对KL散度和交叉熵的详细解释和比较。KL散度和交叉熵KL散度,也称为相对熵(RelativeEntropy),是用来衡量两个概......
  • 决策单调性
    小trick不足挂齿。考虑一个最优化分段dp状物\(dp_i\gets\max\limits_{j=1}^{i-1}\{dp_j+w(j+1,i)\}\),然而你只会\(\mathcalO(nc)\)转移,其中\(c\)是计算权值的复杂度。这时候我们尝试使用决策单调性,也就是最终转移到\(i\)的\(j\)和最终转移到\(i+1\)的\(k\)......