缩放到光标位置 PIXI.js答案

【问题标题】：Zoom to cursor position PIXI.js缩放到光标位置 PIXI.js
【发布时间】：2016-06-17 22:40:59
【问题描述】：

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

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

提前谢谢你。

【问题讨论】：

标签： javascript zooming pixi.js

【解决方案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

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

【讨论】：