首页 > 其他分享 >三、jsPlumb实现流程图配置--Endpoint详细参数

三、jsPlumb实现流程图配置--Endpoint详细参数

时间:2024-03-12 15:15:14浏览次数:28  
标签:Endpoint const -- addEndpoint value jsPlumb endpoint

一、前言

基于上一篇文章中已经搭建好的jsPlumb项目,在此篇文章中演示Endpoint的一些参数以及参数的效果。

二、Endpoint创建

在一个节点上创建Endpoint有三种方式:

  // 方式一:直接使用字符串指定类型。注意:大小写敏感

  // 圆点形
  const endpoint1 = jsPlumb.value.addEndpoint(node1.value, {
    endpoint: 'Dot'
  });
  // 矩形
  const endpoint2 = jsPlumb.value.addEndpoint(node2.value, {
    endpoint: 'Rectangle'
  });
  // 空白
  const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
    endpoint: 'Blank'
  });

  // 方式二:使用官方定义好的类型DotEndpoint.type、RectangleEndpoint.type、BlankEndpoint.type
  // 圆点形
  const endpoint1 = jsPlumb.value.addEndpoint(node1.value, {
    endpoint: DotEndpoint.type,
  });
  // 矩形
  const endpoint2 = jsPlumb.value.addEndpoint(node2.value, {
    endpoint: RectangleEndpoint.type,
  });
  // 空白
  const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
    endpoint: BlankEndpoint.type,
  });
  // 方式三:使用一个对像,实现更多细节的配置
  const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
    endpoint: {
      type: 'Dot',
      options: {}
    }
  });


前两种方式都只能简单的创建一个指定类型的Endpoint,因此着重演示第三种方式中,都有哪些参数可以配置。

三、Endpoint配置

endpoint的配置参数都在options属性中,如代码所示进行控制Endpoint的大小:

const endpoint4 = jsPlumb.value.addEndpoint(node4.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 3,
      },
    },
  });
  const endpoint5 = jsPlumb.value.addEndpoint(node5.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 10,
      },
    },
  });
  const endpoint6 = jsPlumb.value.addEndpoint(node6.value, {
    endpoint: {
      type: 'Rectangle',
      options: {
        width: 20,
        height: 10,
      },
    },
  });


Dot类型的Endpoint使用radius参数来控制大小;Rectangle类型使用widthheight来控制大小。
根据官方文档所写,Endpoint还有cssClasshoverClass属性可以用来调整样式,试一试配置cssClasshoverClass看看效果:

const endpoint7 = jsPlumb.value.addEndpoint(node7.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 10,
        cssClass: 'endpoint-css',
      },
    },
  });
  const endpoint8 = jsPlumb.value.addEndpoint(node8.value, {
    endpoint: {
      type: 'Rectangle',
      options: {
        width: 20,
        height: 10,
        cssClass: 'endpoint-css',
      },
    },
  });

  // 不会触发hover
  const endpoint9 = jsPlumb.value.addEndpoint(node9.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 12,
        hoverClass: 'endpoint-css',
      },
    },
  });
.endpoint-css {
  background-color: red;
  border: 2px solid blue;
}


从效果可以看到,配置cssClass无法改变Endpoint的颜色以及边框。原因是界面上所能看到的Endpoint形状,实际是由svg所实现,我们配置的cssClass实际上是被添加到了svg元素上,而SVG绘制的图形的样式也不是通过style来控制的,实际控制它们的属性参考svg文档
属性hoverClass不管鼠标怎么移动,放到哪里都没有触发过所配置的class,不知道是文档问题还是我的使用问题。

虽然配置cssClass不能进行Endpoint的颜色、边框等样式的调整,但是可以用marginpadding来调整位置,比如Endpoint有一半遮住了节点,导致节点内的文案会看不清,想要Endpoint往外挪一点:

  const endpoint10 = jsPlumb.value.addEndpoint(node10.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 10,
        cssClass: 'endpoint-margin',
      },
    },
  });
.endpoint-margin {
  margin-top: 10px;
}


这样整个Endpoint就在节点外面了,还可以试试设置padding从而得到一个半圆的Endpoint。那么想要设置Endpoint的颜色等样式该如何设置呢?
方式一:局部设置
由于svg绘制的图形不能通过style设置样式,那么就使用svg图形控制样式的属性进行设置颜色等样式,例如fillstroke等属性,这种方式还是需要先设置好cssClass

const endpoint11 = jsPlumb.value.addEndpoint(node11.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 6,
        cssClass: 'real-css',
      },
    },
  });
svg.real-css circle{
  fill: red;
  stroke: blue;
  stroke-width: 2px;
}

这样就可以对real-css类下的Dot类型的Endpoint进行颜色、边框等的设置。当然如果css编写时去掉类的限制就可以实现全局设置,也就是第二种方式。
方式二:全局设置

svg circle, svg rect {
  fill: red;
  stroke: blue;
  stroke-width: 2px;
}

这样就可以完成全局的设置,但是如果你的项目中存在其他的svg图形,就可能产生一些干扰。jsPlumb还提供了一种全局设置的方式:在jsPlumb实例化的时候,设置Endpoint的全局参数:

  jsPlumb.value = newInstance({
    container: canvas.value,
    endpointStyle: {
      fill: 'red',
    },
  });

四、总结

这样就介绍完了对Endpoint的大小、颜色、位置等一些样式的设置,就可以根据实际情况进行调整。至于svg图形的样式属性,每个属性实际的效果,就可以查询svg的文档学习了解。此篇文章中的完整项目代码地址

标签:Endpoint,const,--,addEndpoint,value,jsPlumb,endpoint
From: https://www.cnblogs.com/bencakes/p/18068304

相关文章

  • vue自定义指令
    这里记录下,自定义指令相关思路,用到vue3+elementplus:说明一下使用场景:创建自定义指令v-hasPermi,用来判断按钮权限的(新增/编辑/删除/查看等)。1.页面使用(全局使用,无需引入):<el-buttontype="primary"icon="Plus"plainv-hasPermi="['bid:bidding:save']">添加</el-butt......
  • Avalonia 11.1.0-beta1 发布
    11.1.0-beta1Avalonia是dotnet的跨平台UI框架,提供灵活的样式系统,支持Windows、macOS、Linux、iOS、Android和WebAssembly等多种平台。Avalonia已经成熟并已做好生产准备,已被SchneiderElectric、Unity、JetBrains和GitHub等公司使用。 FullChangelog: htt......
  • 手撕MIPI详细版
     平台:xilinxA775t+ov5640完整地址:NoNounknow/OV5640_MIPI_DDR3_HDMI:MIPI格式5640;1080P@30配置;输入无IP手写解析;(github.com)`timescale1ns/1psmoduleMipi_camera_top#(Mipi_Lane_Num=2)(inputwireI_Top_Rst_n......
  • 国内Docker镜像仓库
    国内Docker镜像仓库的镜像链接地址:中国科技大学:https://docker.mirrors.ustc.edu.cn阿里云:https://cr.console.aliyun.com/Docker中国区官方镜像:https://registry.docker-cn.com网易:http://hub-mirror.c.163.comDaoCloud:https://hub.daocloud.io镜像仓库提供了Docker镜像......
  • 如何建立一个好的索引
    理解索引的类型:聚集索引:表中数据行的物理排序与键值的逻辑(索引)顺序相同。一个表只能有一个聚集索引。非聚集索引:索引包含键值和指向存储数据行的指针,而不是数据本身。选择正确的列进行索引:选择性高的列:索引的选择性是指不同值的数量与表中行数的比率。高选择性意味着索......
  • Spring中使用自带@Autowired注解实现策略模式
    场景SpringBoot中策略模式+工厂模式业务实例(接口传参-枚举类查询策略映射关系-执行不同策略)规避大量if-else:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/130503707设计模式-策略模式在Java中的使用示例:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/d......
  • 一文搞懂Vue的MVVM模式与双向绑定
    v-model是Vue.js框架中用于实现双向数据绑定的指令。它充分体现了MVVM(Model-View-ViewModel)模式中的双向数据绑定特性。下面我们将详细解释v-model如何体现MVVM和双向绑定:1.MVVM模式MVVM模式是一种软件架构设计模式,它将应用程序分为三个部分:Model(模型):代表应用程序的......
  • 虚拟机安装麒麟银河操作系统(Kylin Linux Advanced Server V10)以及设置网卡信息
    1、下载银河麒麟操作系统镜像https://distro-images.kylinos.cn:8802/web_pungi/download/share/Dq5r12WhYyFwAcnZP4JeGXkbsEHOBM0N/Kylin-Server-V10-SP3-General-Release-2303-X86_64.iso2、设置vm       #磁盘建议给到40G #点击完成开始下一步安装和......
  • Windows10 windows installer卸载或安装不了软件怎么办?
        先说我的方法:      1.把安装出现问题的软件或者想要卸载的软件的安装目录下的所有文件都删除。      2.用清理软件清理一下垃圾,包括注册表,这里我自己使用的是火绒->安全工具->系统工具->垃圾清理。      3.手动卸载目标软件,这里我是直接去控......
  • macOS 下使用 pyenv 安装 python 2.n.p 报错,ERROR: The Python zlib extension was no
    TL;DR执行brewinstallzlib安装zlib之后,根据安装信息提示将一下三行变量exportLDFLAGS="-L/opt/homebrew/opt/zlib/lib"exportCPPFLAGS="-I/opt/homebrew/opt/zlib/include"exportPKG_CONFIG_PATH="/opt/homebrew/opt/zlib/lib/pkgconfig"加入到~/.zsh......