282

readme.md

@@ -6,7 +6,7 @@
 
 前端界的好文精读，每周更新！
 
-最新精读：<a href="./前沿技术/281.%E7%B2%BE%E8%AF%BB%E3%80%8A%E8%87%AA%E7%94%B1%20%2B%20%E7%A3%81%E8%B4%B4%E6%B7%B7%E5%90%88%E5%B8%83%E5%B1%80%E3%80%8B.md">281.精读《自由 + 磁贴混合布局》</a>
+最新精读：<a href="./前沿技术/282.%E7%B2%BE%E8%AF%BB%E3%80%8A%E8%87%AA%E7%94%B1%E5%B8%83%E5%B1%80%E5%90%B8%E9%99%84%E7%BA%BF%E7%9A%84%E5%AE%9E%E7%8E%B0%E3%80%8B.md">282.精读《自由布局吸附线的实现》</a>
 
 素材来源：[周刊参考池](https://github.com/ascoders/weekly/issues/2)
 
@@ -208,6 +208,7 @@
 - <a href="./前沿技术/267.%E7%B2%BE%E8%AF%BB%E3%80%8A%E7%A3%81%E8%B4%B4%E5%B8%83%E5%B1%80%20-%20%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E3%80%8B.md">267.精读《磁贴布局 - 性能优化》</a>
 - <a href="./前沿技术/277.%E7%B2%BE%E8%AF%BB%E3%80%8A%E5%88%A9%E7%94%A8%20GPT%20%E8%A7%A3%E8%AF%BB%20PDF%E3%80%8B.md">277.精读《利用 GPT 解读 PDF》</a>
 - <a href="./前沿技术/281.%E7%B2%BE%E8%AF%BB%E3%80%8A%E8%87%AA%E7%94%B1%20%2B%20%E7%A3%81%E8%B4%B4%E6%B7%B7%E5%90%88%E5%B8%83%E5%B1%80%E3%80%8B.md">281.精读《自由 + 磁贴混合布局》</a>
+- <a href="./前沿技术/282.%E7%B2%BE%E8%AF%BB%E3%80%8A%E8%87%AA%E7%94%B1%E5%B8%83%E5%B1%80%E5%90%B8%E9%99%84%E7%BA%BF%E7%9A%84%E5%AE%9E%E7%8E%B0%E3%80%8B.md">282.精读《自由布局吸附线的实现》</a>
 
 ### TS 类型体操
 

前沿技术/282.精读《自由布局吸附线的实现》.md

@@ -0,0 +1,87 @@
+本篇精读来自笔者代码实践，没有原文出处请谅解。
+
+自由布局吸附线的效果如下图所示：
+
+<img width=600 src="https://user-images.githubusercontent.com/7970947/251896263-4e941ea0-d9f7-4625-8095-03aa10f53a0d.gif">
+
+那么如何实现吸附线呢？我们先归纳一下吸附线的特征：
+
+- 正在拖动的 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](https://github.com/dt-fe/weekly/issues/490)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）