“谷歌地图”使用 html5 canvas 拖动
我有一个大的 html5 画布（比屏幕大得多），我想实现“google-maps”拖动。 我希望画布可以用鼠标拖动，并且我希望它每次拖动时仅渲染我们可以在屏幕上看到的部分。 有人有好主意吗？
I have a large html5 canvas (much larger than the screen), and I want to implement a "google-maps" dragging.
I want the canvas to be dragable by mouse, and I want it to render only the part we can see on the screen each time I drag it.
Does someone have a good idea?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我通过在画布元素上使用 jQuery UI 可拖动组件解决了这个问题。
我将它封装在一个 div 中 - 将溢出设置为隐藏，并将画布设置为我需要的大小。很有魅力
http://jqueryui.com/demos/draggable/
I solved this problem by using the jQuery UI draggable component on the canvas element.
I enclosed it in a div - with overflow set to hidden, and made the canvas as large as I need it to be. Works a charm
http://jqueryui.com/demos/draggable/
要仅在屏幕上我们可以看到的部分渲染画布，您可以使用drawImage函数：
drawImage(image, x, y, width, height)
其中“image”作为原始整个画布，“x”和“y”代表拖动时移动的偏移量，“width/height”代表实际窗口的大小。
请参阅文档：
http ://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
以及来自 mdc 的精彩教程：
https://developer.mozilla.org/en-US /docs/Web/Guide/HTML/Canvas_tutorial/Using_images
To render your canvas only on the part of the screen that we can see you could use the drawImage function :
drawImage(image, x, y, width, height)
With "image" as your original entire canvas, "x" and "y" representing the offset that move when dragging and "width/height" the size of the actual windows.
See documentation :
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
and a great tutorial from mdc :
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images