摘要: 通过一个小demo来演示jsPlumb的常用内容。使用拖拽的方式从工具栏将节点拖至画布中;画布中的节点可以移动,连线;线条上可以输入备注信息。 一、项目环境 demo使用vue3+typescript4+quasar2前端框架,与之前的演示项目环境一致。demo完成代码地址 二、功能介绍 1. 界面 阅读全文
posted @ 2024-04-10 11:05 Bencakes 阅读(626) 评论(0) 推荐(0) 编辑
摘要: 在一个交互式的流程图配置中,连线可能是最高频的操作。jsPlumb也提供了相对应的事件和拦截器可以让开发人员做一些符合需求的功能。 一、Connection事件 Connection事件是在行为发生之后的一个通知,Connection常用的一些事件有: EVENT_CONNECTION:连线创建之后 阅读全文
posted @ 2024-03-31 19:53 Bencakes 阅读(562) 评论(0) 推荐(0) 编辑
摘要: 一、Overlay的功能 叠层(Overlay)可以是任意的DOM元素,用于叠加在Connection或Endpoint元素上--绝大部分都是用于叠加在线条上。jsPlumb把Overlay分为了五类:Arrow、Label、PlainArrow、Diamond、Custom。 除了Custom和L 阅读全文
posted @ 2024-03-25 11:38 Bencakes 阅读(1332) 评论(0) 推荐(1) 编辑
摘要: 一、线条创建 在第一篇文章讲到过线条一共有四种类型Bezier、Straight、Flowchart、State Machine,以及每种类型的样子,接下来就演示如何创建线条。 创建一条连线有两种方式:通过代码创建;用户使用鼠标拖拽进行创建。 1. 通过代码创建 使用jsPlumb提供的connec 阅读全文
posted @ 2024-03-19 15:25 Bencakes 阅读(1661) 评论(0) 推荐(0) 编辑
摘要: 一、锚点的功能 刚开始的时候一直分不清楚锚点(Anchor)跟端点(Endpoint)有啥关系有啥区别。Anchor一句话概括就是:用于定义连线在节点上的位置。也就是说Anchor的作用就是用于定位。 根据官方文档,Anchor被分为四种类型: 静态的(Static) 动态的(Dynamic) 边框 阅读全文
posted @ 2024-03-13 19:26 Bencakes 阅读(776) 评论(0) 推荐(1) 编辑
摘要: 一、前言 基于上一篇文章中已经搭建好的jsPlumb项目,在此篇文章中演示Endpoint的一些参数以及参数的效果。 二、Endpoint创建 在一个节点上创建Endpoint有三种方式: // 方式一:直接使用字符串指定类型。注意:大小写敏感 // 圆点形 const endpoint1 = js 阅读全文
posted @ 2024-03-12 15:02 Bencakes 阅读(901) 评论(2) 推荐(1) 编辑
摘要: 项目使用Vue3+Typescript4+Quasar2,安装jsPlumb6.x库,并使用Quasar CLI,运行环境为node16.19.0 一、项目准备 使用Quasar CLI创建好项目(Vue代码风格使用的是Composition API)。执行quasar dev即可在本地环境运行起一 阅读全文
posted @ 2024-03-08 12:08 Bencakes 阅读(1562) 评论(0) 推荐(1) 编辑
摘要: jsPlumb是一个前端库,用来实现类似Microsoft Visio的Web端流程图,可以实现拖拽节点,连线,填充文案等方式生成一个流程图。jsPlumb有两个版本,一个是商业版需要收费,另一个是社区版开源免费。目前社区版的最新的文档地址 一、jsPlumb中的基本概念 节点(Node) 节点就是 阅读全文
posted @ 2024-03-05 18:01 Bencakes 阅读(1087) 评论(0) 推荐(1) 编辑
摘要: 当我们百度搜索“SpringBoot 过滤器 排序”时,有很多文章会讲如何在SpringBoot项目中配置过滤器。大致会分为两种方案: 使用@WebFilter+@Order并配置@ServletComponentScan。 使用代码配置的方式编写FilterRegistrationBean,在其中 阅读全文
posted @ 2021-11-02 20:47 Bencakes 阅读(471) 评论(0) 推荐(0) 编辑
摘要: ##一、背景 研究对象是Springboot的一个后台Web系统。 想了解,在SpringMVC对@RequestBody的参数进行注入之前,执行了request.getInputStream()/request.getReader()或者request.getParameter()方法,会不会对参 阅读全文
posted @ 2021-03-12 16:46 Bencakes 阅读(3325) 评论(0) 推荐(0) 编辑