Javascript 缩放到光标位置PIXI.js

我正在做一个游戏，我想实现一个缩放功能。 游戏是用PIXI.js构建的

我添加了一个PIXI.Stage和一个PIXI.DisplayObjectContainer。 我的问题是，在缩放DisplayobjectContainer时，我根本不知道如何将其聚焦到鼠标器所在的位置。 默认比例因子为1。 我将其更改为每勾0.03或-0.03

---

提前谢谢你。

嗯，我可能有点晚了，但我就是这样做的。这是一个更大系统的一部分，我将代码改编为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，它将缩放每帧的缩放速度，直到比例为1.0）

pixiWindow是一个DisplayObjectContainer，它基本上是所有事物之父，您永远不会触摸它

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

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

当我开始处理这个问题时，如果您想要一个早期的例子，这里有类似的代码，但也包括拖动以移动地图和正确调整窗口大小（可以通过查看页面查看代码）：

---

我知道这是一个更复杂的awnser，可能需要一个简单的案例，但希望这能有所帮助。

好吧，我可能有点晚了，但我就是这样做的。这是一个更大系统的一部分，我将代码改编为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，它将缩放每帧的缩放速度，直到比例为1.0）

pixiWindow是一个DisplayObjectContainer，它基本上是所有事物之父，您永远不会触摸它

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

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

当我开始处理这个问题时，如果您想要一个早期的例子，这里有类似的代码，但也包括拖动以移动地图和正确调整窗口大小（可以通过查看页面查看代码）：

我知道这是一个更复杂的awnser，可能需要一个简单的案例，但希望这能有所帮助