将一条线捕捉到指定的距离

时间:2012-08-14 21:36:47

标签: javascript geometry html5-canvas distance snapping

我在JavaScript画布上绘制了大量的线条和点。当用户点击时,它会添加一个点,以及与下一个点连接的预览。

示例图片:

Drawing with canvas

在此图像中,用户点击了三次,创建了三个深绿色点。现在,用户正在离开最后点击的点28 px,创建浅绿色连接,点和告诉距离的黑框。

现在我想将浅绿色点捕捉到28px。我该怎么做呢?我想给它一个例如10​​px的阈值,并且如果它在该阈值内,则将其捕捉。我知道有一种很好的方法可以用数学的方法做到这一点,但我不知道如何解决这个问题。

感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

检查鼠标移动期间的距离(X_Current是当前鼠标位置,X_0是最后一个点位置)。按距离和阈值替换28和10常量:

Squared_Distance = (X_Current-X_0)*(X_Current-X_0) + (Y_Current-Y_0)*(Y_Current-Y_0)
if ((Squared_Distance >= (28 - 10)*(28 - 10)) &&  (Squared_Distance <= (28 + 10)*(28 + 10)))
  then snap it

新点在28px距离处的位置:

Curr_Distance = Sqrt(Squared_Distance) // assert <> 0
Dir_X = (X_Current-X_0) / Curr_Distance
Dir_Y = (Y_Current-Y_0) / Curr_Distance
P28_X = X0 + 28 * Dir_X
P28_Y = Y0 + 28 * Dir_Y