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

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

缩放到光标位置PIXI.js

1 个答案: