Apache flex 在平面上对齐形状，Algoryhtm

我正在使用flex开发一个简单的图表工具，其中包含平面图上的形状。 首先，我使用一个简单的20*20网格

但真正酷的东西是他们的自动斧头磁铁效应，这就是我怎么称呼它的，至少看看我为什么这么说，我制作了一个巴尔萨米克的小视频

如您所见，它在垂直-水平边界和中心轴上对齐

• 边框：灰色轴
• 水平对齐（高度/2）中心：蓝色斧头
• 无垂直对齐（宽度/2）轴
• 25px的一些中间填充空间：绿色轴

您认为这些算法是如何工作的： 现在我将不做旋转

给定在左上角x、y位置选择的宽度w和高度h的形状S1

查看与两个区域相交的所有形状：

从xmin=x，对于y>0，xmax=x+w

从yming=y开始，对于x>0，ymax=y+h

一旦我有了相关的形状列表，我会检查是否有任何条件匹配：

当我使用“=”时，它是一个近似值+或-2像素将提供想要的“磁铁”效果

• S1 x=S'x=>x处的灰线
• S1 x+w=S'x=>x+w处的灰线
• S1 y=S'y=>y处的灰线
• S1 y+h=S'y=>y+h处的灰线
• s1x=S'x和s1x+w=S'x+w=>x+w/2处的蓝线

并给出了一个20像素的填充磁铁

• s1x=S'x+PADD=>s1x处的绿线
• s1x=S'x-PADD=>s1x处的绿线
• S1 y=S'y+PADD=>S1 y处的绿线
• S1 y=S'y-PADD=>S1 y处的绿线

---

你对此有何想法？

我编写了Balsamiq的捕捉算法。你很接近。我们所做的一件“聪明”的事情（如果我自己可以这么说的话）是在mousedown上用捕捉坐标预先填充两个稀疏数组，以便在mousemove上查找它们很容易/快速/便宜。我在MouseDown上做的是：

让我们讨论x坐标（然后对y重复同样的事情）：

• 假设重力是5
• 看看所有的形状
• 对于每个形状，看左边缘，假设它在100。使用数字100填充从100-GRAVITY（95）到100+GRAVITY（105）的xSnappingPositions对象。对右边缘重复上述步骤

然后，当您执行onMouseMove时，您将看到正在拖动的控件的x和y。xSnappingPositions和ySnappingPosition中是否有与左边缘匹配的内容？如果是，则转到保存在数组中的值，而不是使用鼠标检测到的位置（即捕捉到它）。对右边缘、中心等重复检查

---

我希望这有帮助

非常感谢！我会发布一个视频我的版本，当我得到它的工作。预填充技巧非常好，我也将在多人选举中使用它进行现场突出显示。