我需要一个基于 HTML5 的组件，<canvas>它的行为非常类似于 Google 地图。
注意- 澄清一下，我不是在寻找地图组件，而是在寻找类似于 Google 地图的通用图像缩放/注释组件！
它需要执行以下操作：
- 绘制图像
- 在特定坐标的图像上绘制一些形状
- 对图像进行平滑的捏合缩放，理想情况下在屏幕上捏合的中心点进行放大
- 放大时使图像可拖动，以便您可以更改视口正在查看的图像区域
- 在图像缩放部分的相同坐标处重绘形状，因此无论缩放级别如何，它们都保持相同的大小
我考虑了如何实现这一目标，并决定我可能会执行以下操作：
- 使用jGestures或Hammer.js或Sencha Touch 之类的库来检测捏合和拖动手势
- 使用该
context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh)函数实现基于拖拽事件的图片缩放和定位 - 跟踪缩放级别和视口位置，以便每次拖动/缩放时都可以在图像上的正确坐标处重新绘制形状
- 也许使用带有 setTimeout() 的循环来使缩放/拖动平滑动画而不是一次全部
然而，我很快意识到从头开始编写会非常复杂，即使使用库来处理触摸手势也是如此。
我开始在谷歌上搜索这样一个组件的开源实现，但我发现少数几个没有完整的功能集，似乎得到很好的支持或有很好的评论。
我很难相信像这样的组件的良好开源实现不存在。这是移动 Web 应用程序中的一个常见要求，并且已经有几个关于如何实现类似的问题的 SO 问题——尽管其中大部分是不久前的，所以现在可能存在一些当时不存在的东西？
谁能指出我正确的方向？