谷歌地图(网络应用程序)如何通过手势/捏合在 iphone/ipad 上如此平滑地缩放?

发布于 2024-09-18 00:05:12 字数 499 浏览 9 评论 0原文

如果您在 iPhone 或 iPad 上使用过 Google 地图网络应用程序,您就会知道我在说什么。你在这个屏幕抓取中看不到我的手指,但这是中捏(如果你愿意的话)缩小的。详细区域是初始地图查看区域,外面的模糊部分是中间夹点时进入视野的额外地图。

用手势缩小

使用手势触摸输入的捏合缩放功能可实时缩放当前视图中的地图。如此流畅,看起来就像魔法一样。我们正在尝试缩放图像并重现这种平滑的缩放。有谁知道他们是怎么做到的?

我们不知道是否缩放了单个 img 元素。或者也许其相对网格矩阵中的所有 img 元素都以某种方式同时缩放(这似乎有点不太可能)。也许它是很多 canvas 元素......或者一个大的 canvas 元素(经过合理数量的测试后我们也对此表示怀疑)。拜托,任何建议、想法或答案(如果您来自 Google)都会很棒。

If you have used the Google Maps web app on your iphone or ipad you know what i am talking about. You can't see my fingers in this screen grab, but this is mid-pinch (if you will) zooming out. The detailed area was the initial map viewing area and the blurry bit outside is the extra map that has come into view mid-pinch.

zooming out with gesture

The pinch-to-zoom function that uses the gesture touch input scales the map currently in view live in a way that is so smooth it looks like magic. We are trying to scale images and reproduce this smooth scaling. Does anyone know how they do it?

We don't know if it's a single img element being scaled. Or maybe all the img elements in their relative grid matrix somehow being all scaled at once (this seems a bit unlikely). Maybe it's lots of canvas elements.. or one big canvas element (which we also doubt after a reasonable amount of testing). Please, any suggestions, ideas or answers (if you're from Google) would be great.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

自由范儿 2024-09-25 00:05:12

您需要使用硬件加速的 CSS3 转换。例如,

  • 使用translate3d() 代替translate(),
  • scale3d() 代替scale()

当前仅mobile safari 支持硬件加速。目前尚不清楚 Google 何时会为其 Android 版本的 webkit 浏览器实现此功能。

You need to use the hardware accelerated CSS3 transforms. e.g.

  • translate3d() instead of translate()
  • scale3d() instead of scale()

Only mobile safari currently supports hardware acceleration. It's not known when Google will implement this for Android versions of it's webkit browser.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文