参考线吸附插件refline.js使用教程

之前在研究低代码可视化时遇到了参考线吸附的需求，比如元素直接拖拽时需要显示参考线和吸附，方便对元素位置进行更精准的控制。也思考了很多技术实现方案，最近在github上开发一款非常不错的js插件，它可以帮我们轻松实现元素之间的参考线吸附。我在flwomix/flow中也用了它来实现流程节点的参考线吸附功能，接下来就来和大家分享一下这个开源插件。

什么是 Refline.js？

refline.js 是完全不依赖设计器环境的参考线组件，方便各种设计器快速接入，支持参考线匹配及吸附功能。也就是说我们可以在React或者Vue项目中轻松集成它。

GitHub地址：https://github.com/refline/refline.js

参考线吸附插件refline.js使用教程

如何使用 Refline.js？

1.安装refline.js

npm install refline.js

2.使用

import { RefLine } from 'refline.js'

const refLine = new RefLine({
  rects: [{
    key: 'a',
    left: 100,
    top: 100,
    width: 400,
    height: 800
  }],
  points: [{
    x: 300,
    y: 300
  }],
  current: {
    key: 'b',
    left: 100,
    top: 100,
    width: 100,
    height: 100
  }
})

// 匹配参考线
const lines = refLine.getAllRefLines()

// 拖拽下参考线吸附
// mousedown
const updater = refLine.adsorbCreator({
  pageX: 100,
  pageY: 100,
})
// mousemove
const {delta} = updater({
  pageX: 108,
  pageY: 110,
})

// TODO.

这样就可以实现元素的参考线吸附了，当然还有很多可配置的API，大家可以查看文档学习实践。官方也提供了一个完整的 demo 案例，方便大家快速上手：

https://codesandbox.io/s/reflinejs-7xnsd?fontsize=14&hidenavigation=1&theme=dark