Skip to content

Latest commit

 

History

History
87 lines (50 loc) · 4.5 KB

282.精读《自由布局吸附线的实现》.md

File metadata and controls

87 lines (50 loc) · 4.5 KB

本篇精读来自笔者代码实践,没有原文出处请谅解。

自由布局吸附线的效果如下图所示:

那么如何实现吸附线呢?我们先归纳一下吸附线的特征:

  • 正在拖动的 box 与其他 box 在水平或垂直位置距离接近时,会显示对齐线。
  • 当吸附作用产生时,鼠标在一定范围内移动都不会改变组件位置,这样鼠标对齐就产生了一定的容错性,用户不需要一像素一像素的调整位置。
  • 当鼠标拖动的足够远时,吸附作用消失,此时 box 跟手移动。

根据这些规则,我们首先要实现的就是判断当前拖动 box 与哪些组件的边足够接近。

判断 box 离哪条边最近

距离最近的边可能不止一条,水平与垂直位置要分别判断。我们以水平位置为例,垂直同理。

拖动 box 在水平位置可能有 上、中、下 三条边可以产生吸附,而其他 box 同样也有 上、中、下 三条边可以与之产生交互,因此对于每一个目标 box,我们需要计算 9 个距离:

  • source 上 vs target 上

  • source 上 vs target 中

  • source 上 vs target 下

  • source 中 vs target 上

  • source 中 vs target 中

  • source 中 vs target 下

  • source 下 vs target 上

  • source 下 vs target 中

  • source 下 vs target 下

因为 source 的每条边最多只能出现一条吸附线,所以按照 source 聚合一下每条边的最近 target 边:

  • source 上 vs min(target 上、中、下) = min 上
  • source 中 vs min(target 上、中、下) = min 中
  • source 下 vs min(target 上、中、下) = min 下

可以想象,当 source 与 target box 完全一样大时,最多产生三条吸附线(上 vs 上,中 vs 中,下 vs 下)。但一旦 box 高度不同,结果就不一样了,所以我们还需要计算 source 上、中、下 最接近的距离是多少:

source 所有位置最小距离 = min(min 上、min 中、min 下)

然后按照 source 所有位置最小距离筛选 min 上、min 中、min 下,留下来的就是要 source 距离 target 水平位置最近的吸附线。

我们还需要设置吸附阈值,否则所有鼠标位置都会产生吸附。所以当 source 所有位置最小距离大于吸附阈值时,就不产生吸附效果了。

产生吸附效果

吸附的实现方式与拖拽的实现方式有关。

假设拖拽的实现方式是:dragStart 时记录鼠标的起始位置 mouseStartX(Y 同理),在 drag 时产生了位移 movementX,那么组件当前位置就是 mouseStartX + movementX

如果我们可以拿到吸附产生的反向位移 snapX,那么组件位置就可以实现为:

mouseStartX + movementX + snapX

可以想象当鼠标从上往下移动时,当产生吸附时,snapX 会产生反向作用抵消 box 的向下位移,从而保证 box 在吸附时在垂直方向没有产生移动,这样吸附效果就实现了。

snapX 的值如何计算呢?其实就是上一步的 “source 所有位置最小距离” 取反。

resize 时中间对齐线需要放大双倍吸附力

resize 与 drag 不同,设想鼠标拖动 box 的下方边缘向下做 resize,此时除了组件移动外,还产生了组件高度变高的效果,那么从上、中、下三段观察 box,其位置与鼠标位移的变化关系是:

  • 上:位置不变。
  • 中:位置向下位移为鼠标位移 * 0.5
  • 下:位置向下位移为鼠标位移 * 1

因此如果中间位置产生了吸附线,为了抵消鼠标向下移动,需要产生两倍的 snap 反向位移:

mouseStartX + movementX + snapX * 2

总结

我们梳理了吸附的判断条件与吸附作用如何生效,以及 resize 时中间线吸附的特殊处理逻辑。

自由布局除了吸附之外,还有哪些边界的交互,如何实现呢?希望大家思考与留言。

讨论地址是:精读《自由布局吸附线的实现》· Issue #490 · dt-fe/weekly

如果你想参与讨论,请 点击这里,每周都有新的主题,周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证