摘要：通过一个小demo来演示jsPlumb的常用内容。使用拖拽的方式从工具栏将节点拖至画布中；画布中的节点可以移动，连线；线条上可以输入备注信息。 一、项目环境 demo使用vue3+typescript4+quasar2前端框架，与之前的演示项目环境一致。demo完成代码地址 二、功能介绍 1. 界面 阅读全文

摘要：在一个交互式的流程图配置中，连线可能是最高频的操作。jsPlumb也提供了相对应的事件和拦截器可以让开发人员做一些符合需求的功能。 一、Connection事件 Connection事件是在行为发生之后的一个通知，Connection常用的一些事件有： EVENT_CONNECTION：连线创建之后 阅读全文

摘要：一、Overlay的功能 叠层(Overlay)可以是任意的DOM元素，用于叠加在Connection或Endpoint元素上--绝大部分都是用于叠加在线条上。jsPlumb把Overlay分为了五类：Arrow、Label、PlainArrow、Diamond、Custom。 除了Custom和L 阅读全文

摘要：一、线条创建 在第一篇文章讲到过线条一共有四种类型Bezier、Straight、Flowchart、State Machine，以及每种类型的样子，接下来就演示如何创建线条。 创建一条连线有两种方式：通过代码创建；用户使用鼠标拖拽进行创建。 1. 通过代码创建 使用jsPlumb提供的connec 阅读全文

摘要：一、锚点的功能 刚开始的时候一直分不清楚锚点(Anchor)跟端点(Endpoint)有啥关系有啥区别。Anchor一句话概括就是：用于定义连线在节点上的位置。也就是说Anchor的作用就是用于定位。 根据官方文档，Anchor被分为四种类型： 静态的(Static) 动态的(Dynamic) 边框 阅读全文

摘要：一、前言 基于上一篇文章中已经搭建好的jsPlumb项目，在此篇文章中演示Endpoint的一些参数以及参数的效果。 二、Endpoint创建 在一个节点上创建Endpoint有三种方式： // 方式一：直接使用字符串指定类型。注意：大小写敏感 // 圆点形 const endpoint1 = js 阅读全文

摘要：项目使用Vue3+Typescript4+Quasar2，安装jsPlumb6.x库，并使用Quasar CLI，运行环境为node16.19.0 一、项目准备 使用Quasar CLI创建好项目(Vue代码风格使用的是Composition API)。执行quasar dev即可在本地环境运行起一 阅读全文