vue+jsplumb实现连线绘图

vue+jsplumb实现连线绘图,供大家参考,具体内容如下

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

效果图

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}, // 绘画样式,默认8px线宽  #456
          HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式  默认为null
          ConnectionOverlays: [ // 此处可以设置所有箭头的样式
            ['Arrow', { // 设置参数可以参考中文文档
              location: 1,
              length: 12,
              paintStyle: {
                stroke: '#999',
                fill: '#999'
              }
            }]
          ],
          Connector: ['Straight'], // 要使用的默认连接器的类型:直线,折线,曲线等
          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)
        })

        //连线时触发
        this.jsPlumb.bind('connection',  (conn, originalEvent) => {
          console.log(conn.sourceId)
          console.log(conn.targetId)
        })

        //右键触发
        this.jsPlumb.bind('contextmenu',  (conn, originalEvent) => {
          console.log(conn, originalEvent)
        })
      },
      //  初始化规则使其可以连线、拖拽
      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 //最大连接数(-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; /*一定加上这句,否则连线位置发生错乱*/
  }

  .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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • laravel + vue实现的数据统计绘图(今天、7天、30天数据)

    前言 本文主要是按照时段统计今天.7天.30天的数据,利用laravel+vue实现的,下面话不多说了,来一起看看详细的介绍吧 效果图: 1. 前端vue 使用vue-highcharts <highcharts :options="options"></highcharts> data() { return { options: { title: { text: '' }, xAxis: { categories: [] }, yAxis: { title:

  • 如何使用RoughViz可视化Vue.js中的草绘图表

    介绍 图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分.虽然大多数用户习惯于看到简洁而正式的图表,但一些用户更喜欢看到手绘或素描的图表,这就是 roughViz 的用武之地. roughViz 是一个基于 D3.js 和 Rough.js 的 JavaScript 库.该库旨在帮助构建看起来像草图或手绘图的图表,如下例所示. 在本指南中,你将学习如何使用 vue-roughviz 在 Vue.js 应用程序中显示类似草图的图表,以及如何使用 vue-cli 配置 Vue 应用程序

  • vue+jsplumb实现连线绘图

    vue+jsplumb实现连线绘图,供大家参考,具体内容如下 jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的浏览器,则使用VML技术. 效果图 1.安装 npm install jsplumb --save 2.main.js 引入 import jsPlumb from 'jsplumb' Vue.prototype.$jsPlumb = jsPlumb.jsPlumb 3.示

  • vue+jsplumb实现工作流程图的项目实践

    最近接到一个需求——给后台开发一个工作流程图,方便给领导看工作流程具体到哪一步. 先写了一个demo,大概样子如下: 官网文档Home | jsPlumb Toolkit Documentation 先安装插件 npm install jsplumb --save 安装panzoom,主要用于鼠标滚轮缩放流程图 npm install panzoom --save 在需要的页面引入插件 import panzoom from 'panzoom' import { jsPlumb } from '

  • GoJs连线绘图模板Link使用示例详解

    目录 前言 go.link的简单使用 go.Link的属性配置 routing属性 curve属性 corner.toEndSegmentLength.fromEndSegmentLength.fromShortLength.toShortLength属性 selectable.fromSpot.toSpot属性 总结 前言 可视化图形中除了携带很多信息的节点(node)之外,还需要知道他们之间的关系,而链接他们之间的连线在gojs中是使用go.link进行绘制.在渲染的时候我们根据数据的fro

  • 详解js中构造流程图的核心技术JsPlumb

    项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. 一.效果图展示 1.从左边拖动元素到中间区域,然后连线 2.连线类型可以自定义:这里定义为直线.折线.曲线.实际项目中根据业务我们定义为分装线.分装支线.总装线等 3.鼠标拖动区域选中元素,并且选中元素统一拖动位置. 4.对选中的元素左对齐. 5.对选中元素居中对齐 6.右对齐 7.上对齐 8.垂直居中对齐 9.下对齐 10.根据第一个选中的元素上

  • 详解js中构造流程图的核心技术JsPlumb(2)

    前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line

  • Vue项目前后端联调(使用proxyTable实现跨域方式)

    vue本地项目调试线上接口出现跨域问题 使用方法:vue在配置文件中提供了proxyTable来设置跨域,在config文件夹的index.js文件中 dev: { //开发环境下 // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPublicPath: '/', // 代理配置表,在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'http://xxxxxxx.com/x

  • 在vue中如何封装G2图表

    目录 vue封装G2图表 vue引入G2图表 线上示例 特性 介绍一下在vue中使用G2 vue封装G2图表 <template>     <div id="id"></div> </template> <script> import G2 from '@antv/g2' import { DataSet } from '@antv/data-set' export default {     name: 'pie',    

  • python使用matplotlib绘制折线图

    前言: 我的python学习也告一段落了.不过有些,方法还是打算总结一下和大家分享.我整理了使用matplotlib绘制折线图的一般步骤,按照这个步骤走绘制折线图一般都没啥问题.其实用matplotlib库绘制折线图的过程,其实就是类似于数学上描点,连线绘制图形的过程.所有,这个过程就可以简单的规划为获取图像点信息,描点连线,设置图线格式这三个部分. matplotlib库的安装以及程序引用的说明: 我使用的编程软件为pycharm,我就说一下pycharm安装matplotlib库的方法吧.在

随机推荐