标签：html5 mousemove javascript jquery

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

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

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

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

解决方法:

三种可能的解决方案：

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

标签：html5,mousemove,javascript,jquery
来源： https://codeday.me/bug/20191106/2000118.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。