javascript - 修复了带有 jQ​​uery 可拖动的鼠标指针

Question

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

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

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

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

Answer 1

三种可能的解决方案:

1. 将这个“操纵杆”图标移到离 Angular 落 100 像素的地方。给它不透明度，直到它悬停。让点击和拖动 Action “持续”，以便点击并拖动并按住光标距离操纵杆中心 40 像素的位置会导致屏幕连续平移。

2. 使用箭头，类似于Google Maps . (您也可以通过将抓手部分更改为“操纵杆”部分，将其与第一种解决方案结合起来。)

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