滾動/縮放pixi.js畫布

下面是將一些文字放在pixi.js（使用WebGL）畫布上的簡單方法。滾動/縮放pixi.js畫布

我們如何滾動/縮放畫布的顯示部分？ （即按下鼠標+拖動應該移動...）我想實現什麼

例子：http://s419743653.onlinehome.fr/things/test2.htm

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>pixi.js example 1</title> 
    <script src="pixi.js"></script> 
</head> 
<body> 
    <script> 
    var stage = new PIXI.Stage(0xFFFFFF); 
    var renderer = PIXI.autoDetectRenderer(800, 600); 
    document.body.appendChild(renderer.view); 
    var text = new PIXI.Text("Hello World", {font:"50px Arial", fill:"black"}); 
    stage.addChild(text); 
    renderer.render(stage); 
    </script> 
    </body> 
</html>

來源

2014-09-13 Basj

設置在DisplayObjectContainer規模財產。你的情況你沒有，所以你可以擴展舞臺。

stage.scale.x = 2; 
stage.scale.y = 2;

或者您可以將您的對象放在一個組中並縮放組。

var group = new Pixi.DisplayObjectContainer(); 
group.scale.x = 2; 
group.scale.y = 2; 

group.add(text);

來源

2014-09-13 14:04:34 user3995789

感謝您的縮放部分！我們如何滾動/移動北/南/東/西？由於我對pixi.js真的很陌生（甚至不是很習慣js），你可以在這裏粘貼這些行：http：//jsbin.com/sedegedufenu/1/edit？（例如使用ZOOM + ZOOM-按鈕）所以我會知道在哪裏做這些事情！ – Basj 2014-09-13 14:11:30

我用'stage.scale'來解釋，每次按下ZOOM +/ZOOM-按鈕時都會更改'scale'，但它似乎不起作用：http://jsbin.com/wegahiqegaha/2 /編輯任何想法？ – Basj 2014-09-13 14:22:46

@Basj'stage.scale'不起作用，使用'DisplayObjectContainer'參見[這裏]（http://jsbin.com/temopa/1/），滾動，只需相應地設置x和y值。 – user3995789 2014-09-13 14:26:47

滾動/縮放pixi.js畫布

回答

相關問題