滚动/缩放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画布

回答

相关问题