对齐计划上的形状，Algoryhtm
我正在使用 Flex 开发一个简单的图表工具，其中包含计划中的形状。 首先我使用一个简单的 20*20 网格。
但他们真正酷的东西是自动斧头磁铁效应，我就是这么称呼它的，至少可以明白为什么我的意思是我制作了一个 balsamiq 的小视频。
它在垂直水平边框和中心轴上对齐。
- 边框：灰色轴
- 水平对齐（高度/2） 中心：蓝色轴
- 没有垂直对齐（宽度/2）轴
- 一些 25px 的中间填充空间：绿色轴
您认为这样的算法如何工作： 现在我将不进行轮换。
给定一个在左上角位置x,y选择的形状S1，宽度为w，高度为h。
查看与两个区域相交的所有形状：
从 xmin = x, xmax= x+w for y > 0.
由 yming = y , ymax= y+h 可知 x > y 0.
一旦我有了相关形状的列表，我就会检查是否有任何条件匹配：
当我使用“=”时，它的近似值 + 或 - 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 处的灰线
- S1 x = S'x 和 S1 x+w = S'x+w => x + w/2 处的蓝线
并且给定 20 px 的填充磁铁
- S1 x = S'x + PADD =>绿线位于 S1 x
- S1 x = S'x - PADD =>绿线位于 S1 x
- S1 y = S'y + PADD => S1 y 处的绿线
- S1 y = S'y - PADD => S1 的绿线 y
你对此有何看法？
I am developing a simple diagram tool with shapes on a plan using flex.
First i was using a simple 20*20 grid.
But the real cool stuff out their is auto axe magnet effect, that's how i call it at least to see why i mean by that i made a small video of balsamiq.
As you can see it aligns on the vertical horizontal border and center axes.
- Borders: gray axes
- Horizontal align (height/2) Center: blue axe
- No Vertical align (width/2) axe
- Some intermediary padding space of 25px: green axes
How do you think such algorithms work:
For now i will do with no rotation.
Given a shape S1 selected at position top left x,y of width w and height h.
Look at all shapes intersecting two zone:
from xmin = x, xmax= x+w for y > 0.
from yming = y , ymax= y+h for x > 0.
Once i have the list of shape concerned i check if any conditions matches:
When i use '=' its an approximation + or - 2 pixels will give the wanted 'magnet' effect
- S1 x = S'x => Gray line at x
- S1 x+w = S'x => Gray line at x+w
- S1 y = S'y => Gray line at y
- S1 y+h = S'y => Gray line at y+h
- S1 x = S'x and S1 x+w = S'x+w => Blue line at x + w/2
And Given a padding magnet of 20 px
- S1 x = S'x + PADD => greenline at S1 x
- S1 x = S'x - PADD => greenline at S1 x
- S1 y = S'y + PADD => greenline at S1 y
- S1 y = S'y - PADD => greenline at S1 y
Whats your thought about this ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我写了 Balsamiq 的捕捉算法。你已经很接近了。我们做的一件“聪明”的事情（如果我自己可以这么说的话），就是在MouseDown上预先填充两个带有捕捉坐标的稀疏数组，以便在MouseMove上查找它们很容易/快速/便宜。我在MouseDown 上所做的是这样的：
让我们讨论 x 坐标（然后对 y 重复相同的操作）：
然后，当您执行 onMouseMove 时，您会看到正在拖动的控件的 x 和 y。 xSnappingPositions 和 ySnappingPosition 中现在是否有与左边缘匹配的内容？如果是这样，请转到数组中保存的值，而不是使用鼠标检测到的位置（即捕捉到它）。重复检查右边缘、中心等。
我希望这会有所帮助！
I wrote Balsamiq's snapping algorithm. You're pretty close. The one "clever" thing we do (if I may say so myself), is to pre-populate two sparse arrays with snapping coordinates onMouseDown, so that they are easy/fast/cheap to look up onMouseMove. What I do onMouseDown is this:
let's talk about x coordinates (then repeat the same thing for y):
Then when you do an onMouseMove, you look at the control you're dragging's x and y. Is there something in xSnappingPositions and ySnappingPosition that matches the left edge now? if so, go to the value saved in the array instead of using the position detected by the mouse (i.e. snap to it). Repeat the check for right edge, center, etc.
I hope this helps!