縮放到光標位置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將可能需要爲一個簡單的例子，但希望這有助於。