修复了jQuery draggable的鼠标指针

Question

我正在用HTML5构建一个小游戏。 canvas元素是进入游戏世界的视口。用户可以通过在小图标上单击并拖动鼠标来移动视口在世界中的位置。

问题是当鼠标指针碰到屏幕边缘时滚动停止。很可能，这会严重限制其中一个方向的滚动，因为图标将位于页面的一个角落。

我能想到的唯一技术解决方案是以某种方式修复鼠标指针在图标上的位置并检测每帧的相对运动。基本上我只是在每次拖动事件后将指针位置重置回图标的中心。不幸的是，我相当肯定这是不可能的。从可用性和安全性的角度来看，使用用户指针是一个很大的禁忌。

那么，还有其他方法可以做我想要的吗？我主要是在这里寻找技术想法，但也欢迎提供更合适的界面建议。

Answer 1

三种可能的解决方案：

1. 将此“操纵杆”图标移离角落100像素。给它不透明度，直到它徘徊。点击并拖动动作“维持”，以便点击并拖动光标距离操纵杆中心40个像素，从而导致连续的屏幕平移。

2. 使用箭头，类似于Google Maps。 （您也可以通过将手动抓取器部件更改为“操纵杆”部件将其与第一个解决方案相结合。）

3. 做一些完全不同的事情。例如，当光标接近四个边缘中的任何一个时，让屏幕平移。