Scroll / Zoom a pixi.js canvas

泪湿孤枕 提交于 2019-12-06 14:38:02

问题


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:


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);


来源:https://stackoverflow.com/questions/25823736/scroll-zoom-a-pixi-js-canvas

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!