调整Kinetic JS中拖动的Kinetic.Path元素上的偏移，以始终将偏移中心保持在舞台上 [英] Adjusting offset on a dragged Kinetic.Path element in Kinetic JS to always keep the offset center to the Stage

问题描述

我必须开发可拖动和缩放的世界地图，并且处于封闭系统中，不能依靠Google地图之类的东西.

I am having to develop a draggable and zoomable world map, and being on a closed system, cannot rely on things like Google maps.

这不会是一个完整的地图"应用程序，它将在缩放时显示更多细节，但基本上会显示带有经度/纬度的各种图钉的世界，而在缩放时，请放大地图区域目前位于舞台中央.

This is not going to be a full "map" application which is going to show more detail when zoomed, but basically show the world with various pins for lat/longs, and when zoomed, zoom on the area of the map that is currently centered in Stage.

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

I have been able to create a map using the Kinetic.Path method, and also able to create a slider to set the scale factor of that Path element. I have also set the draggable state of that element to true.

但是缩放时，它总是缩放到路径的左上角，因此基本上是坐标(0,0).我已经使用setOffset()将Paths偏移到Path的中心(.5的宽度，.5的高度).这样做的副作用是将3/4的图像放置在舞台之外，因此我将Path的XY调整为宽度的.5和高度的.5，将其再次居中.

But when scaling, it always scales to the top left of the Path, so basically coords (0,0). I have used the setOffset() to move that Paths offset to the center of the Path (.5 the width, .5 the height). This had the side affect of putting 3/4 of the image outside the stage, so I adjusted the XY of the Path to .5 of the width and .5 of the height, which centered it again.

因此，我现在有了一个在舞台中央居中的路径，并且在缩放时缩放到该路径的中心.美丽的.但是，当我拖动它然后再次缩放时，它会继续基于路径的中心进行缩放.我需要缩放点(我假设它是由setOffset()控制的)相对于舞台中心保持居中.这样，当他们拖动路径并继续缩放时，它将缩放到所查看内容的中心.

So I now have a Path that's centered in the stage, and when zoomed, zooms to the center of the Path. Beautiful. However, when I drag it and then zoom again, it continues to zoom based on the center of the Path. I need the zoom point (which I assume is controlled with setOffset()) to stay centered relative to the stage's center. That way, when they drag the Path and keep zooming, it will zoom to the center of what's in view.

我尝试了各种数学运算(这并不是我的强项)来尝试在拖动后调整偏移量，但是我似乎无法使其正常工作.谁能向我解释这种模式?

I've tried various math (which is not my strong point) to try to adjust the offset after drag, but I can't seem to get it to work correctly. Can anyone explain the pattern to me?

推荐答案

我正在做一些非常相似的事情，经过一番环顾之后，决定改编现有的库调用

I'm doing something very similar and, after looking around a bit, decided to adapt an existing library call kineticjs-viewport (I can't find the demo page since google change their &$*# search algorithm but there's a demo in the repository). It basically handles scaling, panning and zooming for you. There are two issues that I've found with it, namely:

1)缩放时，它会放大左上角的某个点而不是中心屏幕.

1) When zooming, it zooms in on a point in the top-left corner and not center screen.

2)它与最新版本的dynamic-js不兼容，因此，如果要使用最新版本的dynamic-js，则需要进入并更改一些代码.不过，它与dynamic-js版本v3.8.1可以很好地配合.另外，使其兼容并不难，因此，如果您决定使用它并需要帮助，请给我发邮件.

2) It's not compatible with the latest version of kinetic-js so, if you want to use the latest version of kinetic, you'll need to go in and change a bit of the code. It works fine with version v3.8.1 of kinetic-js though. Also, it's not hard to make it compatible so, if you decide to use it and need a hand, send me a pm.

这篇关于调整Kinetic JS中拖动的Kinetic.Path元素上的偏移，以始终将偏移中心保持在舞台上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！