HTML平移和倾斜输入控件

Question

我想创建一个输入，允许用户在框周围拖动一个点，然后在框内输出该点的2D坐标。这将用于驱动摇摄和倾斜值。下图显示了我希望从其他应用程序中获得的功能：

我想在使用HTML和Javascript的Web应用程序中使用它。中心（0,0）坐标应位于框的中间（十字线在上例中相遇）。我是否可以就如何开始创建此类事物提供一些指导？

Answer 1

这可以在纯HTML和JS中完成，虽然这个问题并不简单，所以我只是指出你正确的方向。

首先创建一个容器（div）来表示2D网格，并使用HTML / CSS创建点。您可以使用HTMLElement.offsetTop（）计算与容器相关的点的坐标（虽然这将是容器左上角的坐标，因此如果需要，您需要做一些数学运算从不同的角度来看。）

对于实际的拖动，您需要添加鼠标事件（最简单的方法是使用jQuery），例如mousedown，mousemove和mouseup。

按下时，您的mousedown事件将检查鼠标是否在点上方，如果是，请设置“拖动”按钮。标志为真。

鼠标移动时每次移动时都会检查光标位置（如果拖动=== true），并使用鼠标位置计算与盒子相关的坐标（使用鼠标相对于盒子的位置）位置，这将需要一些数学技能）。您还可以使用CSS更改点的位置以跟随鼠标（如果点应用了position:absolute样式，则将使用HTMLElement.style设置top和left属性。 / p>

最后，mouseup将设置＆＃39;拖动＆＃39;标志为假。

就像我说的那样，这需要一些时间来实施，你可能不会这样做，但这是一个基本的例子。