围绕“按下”指南缠绕我的头

Question

所以我在WPF中创建了这个窗口编辑器，可以帮助我快速创建表单。现在，我所研究的一个功能是创建一个指南工具。从本质上讲，它只是创建了一些行来帮助我将UI元素组织在屏幕上。我会告诉你一个例子。长黑线是我之前谈到的指导方针。

现在，我注意到在许多艺术程序（即Photoshop）和实现Forms的流行IDE中，它们具有“捕捉到”功能，其中UI元素将捕捉到行UI或其他UI元素为了保持对齐。像这样：

我已经在我的编辑器中显示了指南。现在，我想要帮助理解的是，我将如何实现“对齐”功能？我不是要求代码，只是细分（最受欢迎的是视觉细分）。

这是我的问题：

1. 对象如何知道其中一条边（顶部，底部，左侧，右侧）是否触及了一条线？
2. 如果用户不断移动鼠标超过指南，我怎么知道如何取消UI元素？
3. 如果我有（比方说）10行，我如何确保对象附加到最近的行？

更新

Answer 1

当对象移动或调整大小时，跟踪其相对于鼠标的实际大小/位置，并分别跟踪相同信息的捕捉版本。如果给定的实际边缘在一条线的某个任意距离内 - 比如说4个像素（实际上是任意的WPF单位）。如果它在该距离内，请将其设置为它接近的行的值。您仍然具有实际的鼠标相对值，因此如果用户继续拖动它并且它离开该4单位区域，您就知道要取消它。

调整对象大小时，边界框的最多两个边缘将改变位置（假设您可以拖动角落和边缘）。当您移动对象时，边界框的所有四个边都将移动。

因此，您需要跟踪哪些边缘正在移动，并且只对这些边缘进行快速线接近测试。当您移动对象时，将左边或上边缘捕捉到一条线很容易。这只是对象的位置。但是，如果您将右边缘或上边缘捕捉到一条线上，则需要设置

snappedPos.X = nearestVerticalSnapLine.X - draggedObject.Width;

或

snappedPos.Y = nearestHorizontalSnapLine.Y - draggedObject.Height;

您可能还会遇到相反的边缘都接近线条的情况：假设您在十个单位的网格中拖动七个单位的正方形。当它位于网格框内时，所有四个边都将接近网格线。哪个胜利？越接近一个。

定位捕捉线很简单 - %。