vue+jsplumb實現(xiàn)連線繪圖

更新時間：2022年03月29日 16:43:30 作者：qq_37656005

這篇文章主要為大家詳細(xì)介紹了vue+jsplumb實現(xiàn)連線繪圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue+jsplumb實現(xiàn)連線繪圖，供大家參考，具體內(nèi)容如下

jsPlumb是一個比較強大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。在現(xiàn)代瀏覽器中，它使用SVG或者Canvas技術(shù)，而對于IE8以下(含IE8)的瀏覽器，則使用VML技術(shù)。

效果圖

1.安裝

npm install jsplumb --save

2.main.js 引入

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

3.示例代碼

<template>
? <div>
? ? <div id="container">
? ? ? <div class="left">
? ? ? ? <ul>
? ? ? ? ? <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">
? ? ? ? ? ? {{item.name}}
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </div>

? ? ? <div class="right">
? ? ? ? <ul>
? ? ? ? ? <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">
? ? ? ? ? ? {{item.name}}
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
? export default {
? ? name: "linkElementModal",
? ? data() {
? ? ? return {
? ? ? ? jsPlumb: null, // 緩存實例化的jsplumb對象
? ? ? ? leftList:[
? ? ? ? ? {name: 'xxx_left_1', nodeId: 'left_1'},
? ? ? ? ? {name: 'xxx_left_2', nodeId: 'left_2'},
? ? ? ? ? {name: 'xxx_left_3', nodeId: 'left_3'},
? ? ? ? ? {name: 'xxx_left_4', nodeId: 'left_4'}
? ? ? ? ],
? ? ? ? rightList:[
? ? ? ? ? {name: 'xxx_right_1', nodeId: 'right_1'},
? ? ? ? ? {name: 'xxx_right_2', nodeId: 'right_2'},
? ? ? ? ? {name: 'xxx_right_3', nodeId: 'right_3'},
? ? ? ? ? {name: 'xxx_right_4', nodeId: 'right_4'}
? ? ? ? ]
? ? ? }
? ? },
? ? mounted(){
? ? ? this.showPlumb();
? ? },
? ? methods:{
? ? ? showPlumb() {
? ? ? ? this.jsPlumb = this.$jsPlumb.getInstance({
? ? ? ? ? Container: 'container', // 選擇器id
? ? ? ? ? EndpointStyle: {radius: 0.11, fill: '#999'}, // 端點樣式
? ? ? ? ? PaintStyle: {stroke: '#999', strokeWidth: 2}, // 繪畫樣式，默認(rèn)8px線寬 ?#456
? ? ? ? ? HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默認(rèn)懸停樣式 ?默認(rèn)為null
? ? ? ? ? ConnectionOverlays: [ // 此處可以設(shè)置所有箭頭的樣式
? ? ? ? ? ? ['Arrow', { // 設(shè)置參數(shù)可以參考中文文檔
? ? ? ? ? ? ? location: 1,
? ? ? ? ? ? ? length: 12,
? ? ? ? ? ? ? paintStyle: {
? ? ? ? ? ? ? ? stroke: '#999',
? ? ? ? ? ? ? ? fill: '#999'
? ? ? ? ? ? ? }
? ? ? ? ? ? }]
? ? ? ? ? ],
? ? ? ? ? Connector: ['Straight'], // 要使用的默認(rèn)連接器的類型：直線，折線，曲線等
? ? ? ? ? DrapOptions: {cursor: 'crosshair', zIndex: 2000}
? ? ? ? });

? ? ? ? this.jsPlumb.batch(() => {
? ? ? ? ? for(let i = 0; i < this.leftList.length; i++){
? ? ? ? ? ? this.initLeaf(this.leftList[i].nodeId, 'source');
? ? ? ? ? }
? ? ? ? ? for(let j = 0; j < this.rightList.length; j++){
? ? ? ? ? ? this.initLeaf(this.rightList[j].nodeId , 'target')
? ? ? ? ? }
? ? ? ? })

? ? ? ? this.setjsPlumb(true,true);

? ? ? ? //點擊連線
? ? ? ? this.jsPlumb.bind('click', ?(conn, originalEvent) => {
? ? ? ? ?console.log(conn, originalEvent)
? ? ? ? })

? ? ? ? //連線時觸發(fā)
? ? ? ? this.jsPlumb.bind('connection', ?(conn, originalEvent) => {
? ? ? ? ? console.log(conn.sourceId)
? ? ? ? ? console.log(conn.targetId)
? ? ? ? })

? ? ? ? //右鍵觸發(fā)
? ? ? ? this.jsPlumb.bind('contextmenu', ?(conn, originalEvent) => {
? ? ? ? ? console.log(conn, originalEvent)
? ? ? ? })
? ? ? },
? ? ? // ?初始化規(guī)則使其可以連線、拖拽
? ? ? initLeaf(id, type) {
? ? ? ? const ins = this.jsPlumb;
? ? ? ? const elem = document.getElementById(id);
? ? ? ? if (type === 'source') {
? ? ? ? ? ins.makeSource(elem, {
? ? ? ? ? ? anchor: [1, 0.5, 0, 0], // 左 上 右 下
? ? ? ? ? ? allowLoopback: false, //允許回連
? ? ? ? ? ? maxConnections: -1 //最大連接數(shù)（-1表示不限制）
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ins.makeTarget(elem, {
? ? ? ? ? ? anchor: [0, 0.5, 0, 0],
? ? ? ? ? ? allowLoopback: false,
? ? ? ? ? ? maxConnections: -1
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? setjsPlumb(sourceFlag, targetFlag){
? ? ? ? const source = document.getElementsByName('source')
? ? ? ? const target = document.getElementsByName('target')

? ? ? ? this.jsPlumb.setSourceEnabled(source, sourceFlag)
? ? ? ? this.jsPlumb.setTargetEnabled(target, targetFlag)
? ? ? ? this.jsPlumb.setDraggable(source, false) // 是否支持拖拽
? ? ? ? this.jsPlumb.setDraggable(target, false) // 是否支持拖拽
? ? ? },
? ? }
? }
</script>

<style>
? #container{
? ? width: 500px;
? ? height: 500px;
? ? padding: 20px;
? ? position: relative; /*一定加上這句，否則連線位置發(fā)生錯亂*/
? }

? .left{
? ? float: left;
? ? width: 150px;
? }
? .right{
? ? float: right;
? ? width: 150px;
? }

? .left li,.right li{
? ? width: 100%;
? ? border-radius: 4px;
? ? border: 1px solid #ccc;
? ? background: #efefef;
? ? margin-bottom: 20px;
? ? padding: 8px 5px;
? }
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: