0

我必须开发一个可拖动和可缩放的世界地图，并且在一个封闭的系统上，不能依赖谷歌地图之类的东西。

这不会是一个完整的“地图”应用程序，它会在缩放时显示更多细节，但基本上会用各种针脚显示世界，当缩放时，放大当前居中的地图区域在阶段。

我已经能够使用 Kinetic.Path 方法创建地图，还能够创建滑块来设置该 Path 元素的比例因子。我还将该元素的可拖动状态设置为 true。

但是在缩放时，它总是缩放到路径的左上角，所以基本上是坐标（0,0）。我已经使用 setOffset() 将路径偏移量移动到路径的中心（0.5 宽度，0.5 高度）。这有将图像的 3/4 放在舞台外的副作用，因此我将路径的 XY 调整为宽度的 0.5 和高度的 0.5，这又使其居中。

所以我现在有一个位于舞台中心的路径，当缩放时，会缩放到路径的中心。美丽的。但是，当我拖动它然后再次缩放时，它会继续根据路径的中心进行缩放。我需要缩放点（我假设它是由 setOffset() 控制的）以相对于舞台中心保持居中。这样，当他们拖动路径并继续缩放时，它将缩放到视图的中心。

我尝试了各种数学（这不是我的强项）来尝试调整拖动后的偏移量，但我似乎无法让它正常工作。任何人都可以向我解释这种模式吗？

4

1 回答 1

0

我正在做一些非常相似的事情，在环顾四周后，决定调整现有的库调用kineticjs-viewport（我找不到演示页面，因为谷歌更改了他们的 &$*# 搜索算法，但有一个演示在存储库）。它基本上为您处理缩放、平移和缩放。我发现它有两个问题，即：

1）缩放时，它放大左上角的一点而不是中心屏幕。

2）它与最新版本的动力学-js不兼容，所以如果你想使用最新版本的动力学，你需要进去修改一些代码。不过，它适用于 kinetic-js 的 v3.8.1 版本。此外，让它兼容并不难，所以如果您决定使用它并需要帮助，请给我发邮件。

于 2012-08-17T10:13:34.853 回答