Below is an easy way to put some text on a pixi.js (using WebGL) canvas.
How can we scroll / zoom the displayed part of the canvas ? (i.e. mouse down + drag should move ...)
Example of what I would like to achieve : .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>
Below is an easy way to put some text on a pixi.js (using WebGL) canvas.
How can we scroll / zoom the displayed part of the canvas ? (i.e. mouse down + drag should move ...)
Example of what I would like to achieve : 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>
1 Answer
Reset to default 4set the scale property on the DisplayObjectContainer. In your case you don't have any so you can scale the stage.
stage.scale.x = 2;
stage.scale.y = 2;
or you can put your objects in a group and scale the group.
var group = new Pixi.DisplayObjectContainer();
group.scale.x = 2;
group.scale.y = 2;
group.add(text);