滚动/缩放pixi.js画布 [英] Scroll / Zoom a pixi.js canvas
本文介绍了滚动/缩放pixi.js画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是在pixi.js（使用WebGL）画布上放置一些文本的简单方法。
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 ...)
我想实现的示例： 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>
推荐答案
> DisplayObjectContainer 。
set 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);
这篇关于滚动/缩放pixi.js画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
