使用 jQuery 可拖动修复鼠标指针
我正在用 HTML5 构建一个小游戏。画布元素是游戏世界的视口。用户可以通过在小图标上单击并拖动鼠标来移动视口在世界中的位置。
问题是当鼠标指针触及屏幕边缘时滚动停止。很可能，这将严重限制沿某一方向的滚动，因为图标将位于页面的角落之一。
我能想到的唯一技术解决方案是以某种方式固定鼠标指针在图标上的位置并检测每帧的相对移动。基本上，我只是在每次拖动事件后将指针位置重置回图标的中心。不幸的是，我相当肯定这是不可能的。从可用性和安全性的角度来看，使用用户的指针是一个很大的禁忌。
那么，还有其他方法可以实现我想要的功能吗？我主要在这里寻找技术想法，但也欢迎提出更合适的界面的建议。
I'm building a little game in HTML5. The canvas element is a viewport into the game world. The user can move the viewport's position in the world by clicking and dragging with the mouse on a small icon.
The problem is that the scrolling stops when the mouse pointer hits the edge of the screen. In all likelihood, that will limit scrolling in one of the directions severely, since the icon will be in one of the corners of the page.
The only technical solution I can think of would be to somehow fix the mouse pointer's position on the icon and detect the relative movement each frame. Basically I would just reset the pointer position back to the center of the icon after each drag event. Unfortunately, I'm fairly positive that this is not possible. Playing with the user's pointer is a big no-no from a usability and security standpoint.
So, is there any other way to do what I want? I'm primarily looking for technical ideas here, but suggestions for a more appropriate interface would also be welcome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
三种可能的解决方案：
将此“操纵杆”图标移离角 100 像素。赋予它不透明度，直到它悬停。让单击并拖动动作“持续”，以便单击并拖动并按住光标距操纵杆中心 40 像素会导致连续屏幕平移。
使用箭头，类似于 Google 地图。 （您还可以通过将抓手部分更改为“操纵杆”部分来将此与第一个解决方案结合起来。）
做一些完全不同的事情。例如，当光标靠近四个边缘中的任何一个时，让屏幕平移。
Three possible solutions:
Move this "joystick" icon 100 pixels off of the corner. Give it opacity until it is hovered. Have the click-and-drag movements "sustain" so that click-drag-and-holding the cursor 40 pixels away from the joystick center causes continuous screen panning.
Use arrows, similar to Google Maps. (You can also combine this with the first solution by changing the hand grabber part to the "joystick" part.)
Do something completely different. For example, have the screen pan when the cursor gets close to any of the four edges.