我在 JavaScript 画布上绘制了大量的线条和点。当用户单击时,它会添加一个点,并添加一个与下一个点连接的预览。
示例图片:
在这张图片中,用户点击了三次,创建了三个深绿色点。现在用户悬停在距离最后一个点击点 28 px 的地方,创建了浅绿色的连接、点和指示距离的黑框。
现在我想将浅绿色点捕捉到 28px。我该怎么做呢?我想给它一个阈值,比如 10 像素,如果它在那个阈值之内,让它捕捉。我知道有一个很好的方法可以在数学上做到这一点,但我没有知识来解决它。
谢谢您的帮助!
我在 JavaScript 画布上绘制了大量的线条和点。当用户单击时,它会添加一个点,并添加一个与下一个点连接的预览。
示例图片:
在这张图片中,用户点击了三次,创建了三个深绿色点。现在用户悬停在距离最后一个点击点 28 px 的地方,创建了浅绿色的连接、点和指示距离的黑框。
现在我想将浅绿色点捕捉到 28px。我该怎么做呢?我想给它一个阈值,比如 10 像素,如果它在那个阈值之内,让它捕捉。我知道有一个很好的方法可以在数学上做到这一点,但我没有知识来解决它。
谢谢您的帮助!
Check the distance during mouse moving (X_Current is current mouse position, X_0 is last point position). Replace 28 and 10 constants by distance and threshold:
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
Position of new point at 28px distance:
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