0

我正在使用 flex 开发一个带有形状的简单图表工具。首先，我使用了一个简单的 20*20 网格。

但是他们真正酷的东西是自动斧头磁铁效应，这就是我所说的至少是为了明白为什么我的意思是我制作了一个 balsamiq 的小视频。

http://screenr.com/clB

http://www.balsamiq.com/

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

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

您认为此类算法如何工作：现在我将不进行旋转。

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

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

对于 y > 0，从 xmin = x, 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 处的灰线
  • 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 处的绿线

你对此有何看法？

4

1 回答 1

0

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

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

  • 说重力是5
  • 看看所有的形状
  • 对于每个形状，查看左边缘，假设它位于 100。使用数字 100 填充从 100-GRAVITY (95) 到 100+GRAVITY (105) 的 xSnappingPositions 对象。重复右边缘

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!

于 2009-11-10T20:53:29.217 回答