缩放到光标位置 PIXI.js

Question

我正在开发一款游戏，我想实现缩放功能。游戏是用 PIXI.js.

构建的

我添加了一个 PIXI.Stage 和一个 PIXI.DisplayObjectContainer。我的问题是，在缩放 DisplayobjectContainer 时，我对如何将 DisplayobjectContainer 聚焦到我的 mouseCursor 所在的位置一无所知。默认比例因子为 1。我每次将它更改为 0.03 或 -0.03。

提前致谢。

Answer 1

好吧，我可能有点晚了，但我就是这样做的。这是一个更大系统的一部分，我将代码改编为 awnser，所以如果它本身不起作用，请告诉我，我会尽力提供帮助：

//call this just at the start to register event callbacks
cameraInit:function() {
    map.mousemove = map.touchmove = function(data) {
        globalMousePosition = data.getLocalPosition(pixiWindow);
    }
}

//call this every frame
cameraUpdate:function() {

    if (Math.abs(mapScaleTarget - map.scale.x) >= 0.02) {
        if(!zoom_on_prev_frame){
            //zoom started, do something you want here
        }

        localMousePosition = views.toLocal(globalMousePosition);

        if (map.scale.x > mapScaleTarget) {
            map.scale.x -= zoomSpeed;
            map.scale.y -= zoomSpeed;
        } else {
            map.scale.x += zoomSpeed;
            map.scale.y += zoomSpeed;
        }

        map.position.x = -(localMousePosition.x * map.scale.x) + globalMousePosition.x;
        map.position.y = -(localMousePosition.y * map.scale.x) + globalMousePosition.y;

        zoom_on_prev_frame = true;
    }else{
        if(zoom_on_prev_frame){ 
            //zoom ended, do something you want here
            zoom_on_prev_frame = false;
        }
    }
}

因此，我正在使用的 4 个变量未在此处声明。

zoomSpeed - 是每帧缩放的百分比（在您的情况下为 0.03）。

mapScaleTarget - 是您打算通过缩放达到的目标。（所以，如果你的比例是 0.3 而你将它设置为 1.0，它会缩放每一帧的 zoomSpeed 直到比例为 1.0）

pixiWindow - 是一个 DisplayObjectContainer，它基本上是一切之父，你永远不会接触

map - 是一个 DisplayObjectContainer，是 pixiWindow 的子项，也是您正在缩放的实际对象。

这基本上是通过在缩放后重新定位图层来实现的，因此缩放前鼠标的位置在缩放后保持不变。使用父对象和子对象的原因是因为你可以通过简单地使它们成为 pixiWindow 而不是 map 的子对象来拥有不缩放的对象（如 GUI 元素）。

如果你在我开始处理这个问题时想要一个早期的例子，你可以在这里找到类似的代码，但是还包括拖动以移动地图和更正 window 调整大小（可以参见代码通过检查页面):

http://dl.dropboxusercontent.com/u/23574503/pixitests/index.html

我知道这是一个更复杂的遮阳篷，对于一个简单的案例可能需要它，但希望这对您有所帮助。

缩放到光标位置 PIXI.js

Zoom to cursor position PIXI.js

javascript

zooming

pixi.js