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

问题是,当鼠标指针击中屏幕边缘时,滚动停止.在极有可能的情况下,这将严重限制在一个方向上的滚动,因为该图标将位于页面的一个角上.

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

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

解决方法:

三种可能的解决方案：

>将此“操纵杆”图标移到角落100像素处.使它不透明,直到将其悬停.使单击和拖动动作“保持”,以便使鼠标单击并保持距操纵杆中心40个像素,从而可以连续进行屏幕平移.
>使用类似于Google Maps的箭头.(您也可以通过将抓手部件更改为“操纵杆”部分,将其与第一种解决方案结合起来.)
>做一些完全不同的事情.例如,当光标靠近四个边缘中的任意一个时,让屏幕平移.