缩放到光标位置PIXI.js

Question

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

我有一个PIXI.Stage和一个PIXI.DisplayObjectContainer添加到它。 我的问题是，我没有丝毫的想法如何将DisplayobjectContainer聚焦到我的鼠标光标所在的位置。 默认比例因子为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

我知道这是一个比较复杂的awnser将可能需要为一个简单的例子，但希望这有助于。