首页 > 其他分享 >使用joinjs绘制流程图(八)-实战-绘制流程图+节点路径自定义

使用joinjs绘制流程图(八)-实战-绘制流程图+节点路径自定义

时间:2024-05-13 23:07:57浏览次数:24  
标签:const 流程图 自定义 joint link drawRect div node2 绘制

效果图

代码

<template>
  <div class="app">
    <div ref="myholder" id="paper"></div>
  </div>
</template>

<script>
import * as joint from '@joint/core'
import $ from 'jquery'
export default {
  data() {
    return {
      graph: null,
    }
  },
  mounted() {
    const namespace = joint.shapes
    var graph = new joint.dia.Graph({}, { cellNamespace: namespace })
    this.graph = graph

    var paper = new joint.dia.Paper({
      el: this.$refs.myholder,
      model: this.graph,
      width: 800,
      height: 300,
      cellViewNamespace: namespace,
      drawGrid: true,
      gridSize: 10,
      background: {
        color: 'rgba(0, 255, 0, 0.3)',
      },
      // 禁止交互
      interactive: false, // disable default interaction (e.g. dragging)
      // 当mousemove事件的数量超过clickThreshold时,在mouseup之后不会触发pointerclick事件
      clickThreshold: 10,
    })

    this.paper = paper

    const node1 = this.drawRect({ x: 50, y: 30 }, '节点1')
    const node2 = this.drawRect({ x: 200, y: 30 }, '节点2')
    const node3 = this.drawRect({ x: 350, y: 30 }, '节点3')
    const node4 = this.drawRect({ x: 500, y: 30 }, '节点4')
    // const node5 = this.drawRect({ x: 50, y: 100 }, '流程-1.1')
    const node6 = this.drawRect({ x: 350, y: 100 }, '节点6')
    const node7 = this.drawRect({ x: 350, y: 150 }, '流程-2.2')

    //  自定义路径点
    const path_points = new joint.g.Path(
      'M 300 50 L 325 50 L 325 120 L 350 120'
    ).segments
    const points = path_points.map((item) => item.end)

    const path_points_2 = new joint.g.Path(
      'M 300 50 L 325 50 L 325 120 L 325 170 L 350 170'
    ).segments
    const points_2 = path_points_2.map((item) => item.end)

    const node2_to_node6_vetices = [...points]
    const node2_to_node7_vetices = [...points_2]

    this.drawLine(node1, node2)
    this.drawLine(node2, node3)
    this.drawLine(node3, node4)
    // this.drawLine(node1, node5)
    this.drawLine(node2, node6, node2_to_node6_vetices)
    this.drawLine(node2, node7, node2_to_node7_vetices)
  },
  methods: {
    drawRect({ x, y }, text) {
      var rect = new joint.shapes.standard.Rectangle()
      rect.position(x, y)
      rect.resize(100, 40)
      rect.attr({
        // body选择器修改的是 svg元素  [selector for the <rect> SVGElement]
        body: {
          fill: '#2c3e50',

          // strokeWidth: 0,
          // strokeDasharray: '10,2',
          // fill: 'transparent',
          // stroke: 'transparent',
        },

        // label选择器修改的是 text元素  [selector for the <text> SVGElement]
        label: {
          text,
          fill: '#3498DB',
          fontSize: 18,
          fontWeight: 'bold',
          fontVariant: 'Microsoft YaHei',
        },
      })
      rect.addTo(this.graph)

      // this.transformHtml(rect, text)
      return rect
    },
    // vertices 数组,从起始点到终点是否需要绕行  [https://resources.jointjs.com/tutorial/links]
    drawLine(node1, node2, vertices) {
      var link = new joint.shapes.standard.Link()
      link.source(node1)
      link.target(node2)
      link.addTo(this.graph)

      if (vertices && vertices.length) {
        link.vertices(vertices)
        // 注意:下面不能使用,使用下面后路径会自动去计算
        // link.router('orthogonal')
        // link.connector('rounded')
      }
      link.attr({
        line: {
          stroke: 'gray',
        },
      })
    },
    transformHtml(element, text) {
      var bbox = element.getBBox()
      // NOTE:重点方法  绘制一个html元素在element元素之上
      //  Draw an HTML rectangle above the element.
      var clientRect1 = this.paper.localToClientRect(bbox)
      var div = document.createElement('div')
      div.style.position = 'fixed'
      div.style.background = 'red'
      div.style.left = clientRect1.x + 'px'
      div.style.top = clientRect1.y + 'px'
      div.style.width = clientRect1.width + 'px'
      div.style.height = clientRect1.height + 'px'
      div.innerHTML = `<span class='yellow'>${text}</span>`
      $(div).click(function () {
        console.log(this)
      })
      this.paper.el.appendChild(div)
    },
  },
}
</script>

<style lang="less" scoped>
#paper {
  border: 1px solid;
}

/deep/.yellow {
  color: yellow;
}
</style>

标签:const,流程图,自定义,joint,link,drawRect,div,node2,绘制
From: https://www.cnblogs.com/it774274680/p/18190270

相关文章

  • 【django学习-21】ModelForm方式,自定义数据校验
    前言:我们在使用ModelForm新增数据时,除了使用默认的数据校验之外,还可以自定义数据校验例如:有个靓号的列表,新增/编辑校验1.代码示例1.1:modles.pyclassPrettyNum(models.Model):"""靓号表"""mobile=models.CharField(verbose_name="手机号",max_length=11)......
  • 【图像处理】使用matplotlib库显示灰度图像为自定义颜色(2)
    在下面的代码中,facies_img的值只有[0,1,2]表明图像是灰度图像。通过下面的代码可以让图像显示为彩色图像importmatplotlib.pyplotaspltimportmatplotlib.colorsasmcolorsfromPILimportImageimportosimportrandomimportnumpyasnp#路径设置data_dir='data......
  • apisix~自定义插件的部署
    参考https://docs.api7.ai/apisix/how-to-guide/custom-plugins/create-plugin-in-luahttps://apisix.apache.org/docs/apisix/next/plugin-develop/https://apisix.apache.org/docs/apisix/next/plugins/prometheus/https://apisix.apache.org/blog/2022/02/16/file-logge......
  • 简单的自定义表单控件
    核心为onChang事件,赋值需要关注value <Form.Itemname='position'label="位置"style={itemStyle}><InputXYZ/></Form.It......
  • vite 自定义插件获取打包时长
    //vite.config.ts//打包时间functionbuildTimePlugin(mode){console.log('mode:>>',mode)return{name:'build-time',//在buildStart阶段设置初始值buildStart(){this.startTime=Date.now()if(mode!==&......
  • 地理信息系统(GIS)的创新应用:绘制未来世界的智慧蓝图
    在信息爆炸的时代,地理信息系统(GIS)作为连接空间数据与决策制定的桥梁,正以其独特魅力在各行各业绽放异彩。GIS不再局限于传统的地图制作和资源管理,它正以创新的方式融入我们的生活,重塑着我们理解世界的方式。今天,就让我们一起探索GIS在不同行业和研究领域的新用途,感受它如何描绘出一......
  • uniapp自定义input清除按钮
    uniapp小程序,引入uni-ui库后,观察到其他组件,有的默认有清除按钮,比如: 在写内置组件input框,查看文档没有此属性,官方示例在这里:https://github.com/dcloudio/hello-uniapp/blob/master/pages/component/input/input.nvue 还需自行复制对应的css,试了下效果不太好。我需要和级联......
  • JVM自定义加类加载器
    在JVM类加载器分类中提及JVM自带的加载器无法满足实际业务需求时,可以自定义加载器。那一般什么情况下需要自定义加载器呢?隔离加载类:模块隔离——把类加载到不同的应用选项中,比如Tomcat类加载器。修改类加载方式:平台提供了三类加载器除必须加载的类加载器,可以根据实际情况......
  • JAVA Comparator 自定义排序 源码分析
    对于一个数组来说如果我们想要从大到小排序一般会这么写Integer[]nums={1,2,3};Arrays.sort(nums,newComparator<Integer>(){@Overridepublicintcompare(Integera,Integerb){returnb-a;}});......
  • Go语言异常处理:自定义错误【errors.New+panic】
    程序本身抛出的异常信息不是太友好,我们可以自定义错误或者异常的信息,需要使用errors包中的New函数来包装一下异常或错误信息;在使用内置函数panic(err),把异常信息后面的程序执行终止掉,因为再执行后面的程序也没有意义了。 packagemainimport"fmt"import"errors"funcma......