vue+jsplumb 实现连线绘图

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的浏览器，则使用VML技术。

安装


npm install jsplumb --save

main.js 引入


import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

示例代码

<!--* @Descripttion: 使用jsplumb插件实现连线功能* @version:* @Author: zhangfan* @email: 2207044692@qq.com* @Date: 2021-10-15 17:27:24* @LastEditors: zhangfan* @LastEditTime: 2022-06-02 10:38:39
-->
<template><div class="content" id="plumbContent"><div class="left"><div class="top">项目</div><ul class="bottom" id="leftBottom"><liv-for="(item, index) in leftData":key="index":id="item.id"name="source">{{ item.label }}</li></ul></div><div class="right"><div class="top">负责人</div><ul class="bottom" id="rightBottom"><liv-for="item in rightData":key="item.id":id="item.name"name="target"class="itemLi"><div>{{ item.name }}</div></li></ul></div></div>
</template>
<script>
export default {data() {return {leftData: [{id: 1,label: "项目1",},{id: 2,label: "项目2",},{id: 3,label: "项目3",},{id: 4,label: "项目4",},{id: 5,label: "项目5",},{id: 6,label: "项目6",},],rightData: [{id: 1,name: "张三",},{id: 2,name: "李四",},{id: 3,name: "王五",},],plumbins: null, // 缓存实例化的jsplumb对象connection: [],connectionList: [], //手动维护一个关系};},methods: {init() {//   初始化实例this.$jsPlumb.ready(() => {this.plumbins = this.$jsPlumb.getInstance({Container: "plumbContent", // 选择器idConnector: ["Straight"], //直线连接});// 双击删除连线this.plumbins.bind("dblclick", (connection, originalEvent) => {this.plumbins.deleteConnection(connection);});this.plumbins.bind("connection", (conn, originEvent) => {// 数据存入let obj = {};obj.sourceId = conn.sourceId;obj.targetId = conn.targetId;console.log(obj);console.log(this.plumbins.getConnections()); //获取连线数据});this.plumbins.batch(() => {this.leftData.forEach((item, index) => {this.initNode(item.id, "source");});this.rightData.forEach((item, index) => {this.initNode(item.name, "target");});});// 添加列表支持滚动this.plumbins.addList(leftBottom);this.plumbins.addList(rightBottom);});},initNode(id, type) {// 初始化点使其可以连接const ins = this.plumbins;const elements = document.getElementById(id);if (type === "source") {ins.makeSource(elements, {// 锚点anchor: [1, 0.5, 0, 0],allowLoopback: false,maxConnections: 1, //一对一就把maxConnections设置为1，一对多就设置为-1//   锚点样式paintStyle: {fill: "skyblue",strokeWidth: 3,radius: 5,},hoverPaintStyle: { fill: "red" },//   连线样式connectorStyle: {outlineStroke: "skyblue",strokeWidth: 3,},connectorHoverStyle: {strokeWidth: 6,stroke: "red",outlineStroke: "red",},});} else {ins.makeTarget(elements, {anchor: [0, 0.5, 1, 0], // 锚点//   锚点样式paintStyle: {strokeWidth: 2,radius: 20,},allowLoopback: false,maxConnections: -1, //一对一就把maxConnections设置为1，一对多就设置为-1paintStyle: {fill: "skyblue",strokeWidth: 3,radius: 5,},endpointHoverStyle: { fill: "red" },});}},setjsPlumb(sourceFlag, targetFlag) {const source = document.getElementsByName("source");const target = document.getElementsByName("target");this.plumbins.setSourceEnabled(source, sourceFlag);this.plumbins.setTargetEnabled(target, targetFlag);this.plumbins.setDraggable(source, true); // 是否支持拖拽this.plumbins.setDraggable(target, true); // 是否支持拖拽},repaintPlumb() {this.plumbins.repaintEverything();},repaintConnetion(connetionList) {if (this.$store.state.lines.connetions.length != 0) {let connect = this.$store.state.lines.connetions.concat([]);this.$nextTick(() => {// 根据commonJS中的列表重新划线connect.forEach((item) => {this.plumbins.connect({source: item.sourceId,target: item.targetId,});});});}},// 保存连线关系getConnetion() {this.connection = this.plumbins.getConnections();},},mounted() {this.init();this.repaintConnetion();// 每次页面大小改变重新绘画连线window.addEventListener("resize", this.repaintPlumb);},
};
</script>
<style lang="less" scoped>
::-webkit-scrollbar {width: 0.2vw;background-color: rgba(192, 192, 192, 0);
}.diy_overlay {width: 3vw;background-color: red;height: 3vw;
}// #plumbContent {//   position: relative;
// }
.content {display: flex;justify-content: space-around;user-select: none;padding: 3vw;position: relative;overflow: scroll;// height: 28vw;
}.right,
.left {// padding-right: 1vw;color: #fff;width: 30%;position: relative;text-align: center;.top {border: none;font-size: 0.8vw;font-weight: 600;color: #fff;}.bottom {position: relative;height: 25vw;overflow-y: scroll;padding-right: 2vw;border: 1px #fff solid;margin: 0 auto;width: 80%;margin-top: 0.5vw;li {list-style: none;display: inline-block;margin-top: 1vw;width: 100%;cursor: pointer;min-width: 5vw;text-align: center;border: 1px #fff solid;}}
}
.right {width: 60%;.bottom {li {color: #fff;border: 1px #fff solid;padding: 1vw 0;div {border: 1px #fff solid;border-radius: 3px;display: inline-block;margin-left: 0.5vw;padding: 0 0.2vw;}}}
}.endpointLabel {color: red;font-size: 0.5vw;font-weight: 600;cursor: pointer;
}
</style>

vue+jsplumb 实现连线绘图相关推荐

Vue 使用jsPlumb 实现连线绘图
第一步:安装jsPlumb npm i jsplumb 第二步:全局引入在main.js 中引入,且挂在Vue事例上 import jsPlumb from 'jsplumb'Vue.prototy ...
vue+jsplumb 实现根据数据渲染出连线绘图
vue+jsplumb 实现根据数据渲染出连线绘图 jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以 ...
【PC工具】创客、arduino爱好者必备，最最简单好用硬件电路连线绘图工具Fritzing...
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 今天分享一个超级好用,超级简单粗暴的硬件连线绘图工具Fritzing. 如下图所示,即 ...
python移动平均线绘图_移动平均线绘图
三线趋势交易法总结趋势线绘制-三线趋势交易法 002350股票,简要说明移动平均线是技术性分析家们用于绘图的某一证劵(股票)或期货交易以往市场价格的线.目地是用于预知未来的价钱转变.假如恰当立体画出 ...
基于vue的svg画线_基于SVG的Vue图组件库
基于vue的svg画线图表 (diagram-vue) A vue component library of diagrams. Vue组件图库. View Demo 查看演示 Download S ...
基于 Vue 的学生社团线上管理平台开发与设计
0 引言近年来, 各高校为丰富学生的校园生活. 培养学生的个性, 社团与社团人数增加迅速, 需要处理的各类信息也层出不穷, 传统的管理方式已经不利于快捷地处理这些问题. 因此管理不便. 信息错综复杂 ...
jsplumb php,jsplumb 中文教程连线绘图工具库介绍附简单在线demo与实战项目
1. jsplumb 中文基础教程后续的更新会直接在github上,如需查看最新文档,请直接访问原始仓库. 另外用了七牛的测试域名做图片托管,现在发现很多图片都无法显示了,建议直接参看git仓库里的 ...
Jsplumb基础教程(vue+jsplumb+d3)
目前github社区存在几款可用于设计流程图的绘图框架: go.js( http://www.gojs.net/latest/index.html) :go.js 提供一整套的JS工具 ,支持各种交互 ...
【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系
使用场景,在开发的项目中需要实现的功能是两个表单通过用户鼠标点击连线的方式来给两个表的字段做数据映射关系,点击提交把用户创建的映射关系以map的形式传给后端.当时各种百度都没找到相关的文档可以参考,后 ...
vue+jsplumb实现工作流程图
最近接到一个需求--给后台开发一个工作流程图,方便给领导看工作流程具体到哪一步. 先写了一个demo,大概样子如下: 官网文档Home | jsPlumb Toolkit Documentation ...

vue+jsplumb 实现连线绘图

vue+jsplumb 实现连线绘图相关推荐

最新文章

热门文章