缩放到光标位置PIXI.js

Question

我正在开发游戏,我想实现缩放功能.游戏是用PIXI.js构建的.

我有一个PIXI.Stage和一个PIXI.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元素).

如果你想在我开始处理这个问题的时候有一个早期的例子,你在这里有类似的代码,但是还包括拖动来移动地图和正确的窗口大小调整(可以通过检查页面来查看代码):

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

我知道这是一个更复杂的芒果,可能需要一个简单的案例,但希望这会有所帮助.