java画bezier曲线_贝塞尔曲线(Bezier curve)实现节点连接

这篇博客介绍了如何利用贝塞尔曲线实现类似NodeRed中节点间的平滑连接线。贝塞尔曲线允许平滑地连接两个点,通过控制点的位置调整曲线形状。作者通过分析NodeRed的源码发现,控制点通常设定为距离起点和终点75px的位置。通过修改控制点的距离,可以实现不同效果的曲线连接。示例代码展示了如何监听鼠标事件并动态生成SVG路径。
摘要由CSDN通过智能技术生成

背景

长久以来都想找一个画流程图的工具,有几个需求,可以将组件拖到绘图面板中,并且组件间可以通过线进行关联,在属性面板可以配置组件的属性,这里的组件可能是html的组件,也可能是一个功能,为什么需要这么一个东西呢?如果有这东西,很多想法就可以实现,比如工作流

服务编排

但一直找不到满意的框架,很大原因就是这些框架颜值太低,直到遇到NodeRed,NodeRed是物联网开发工具,提供可视化界面通过配置就能实现物联网程序的开发,让我感兴趣的是NodeRed可视化界面,颜值高,操作便利,简洁不花哨

21a55f20d186c86782a3526fe1677e66.png

因为NodeRed是开源的,也花了一段时间去研究他的代码,想把可视化工具抽离出为我所用,种种原因失败了,既然抽离不出来,能不能自己实现一个?之前从来没想过自己开发一个,但细想觉得并不难实现,可视化界面核心有两点组件的绘制

连接线的绘制

整个界面都是通过svg相关标签实现,组件的绘制相对比较简单,就是一些svg元素组合,卡在了连接线这里,因为NodeRed节点连接线操作平滑,曲线合理,一开始以为是用很复杂的算法实现的,在源码里去找这个算法,其实是把问题想复杂了,这个就是一条普通的贝塞尔曲线,既然知道了实

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值