javascript - 滚动/缩放 pixi.js Canvas

标签 javascript html canvas webgl pixi.js

下面是在 pixi.js(使用 WebGL) Canvas 上放置一些文本的简单方法。

我们如何滚动/缩放 Canvas 的显示部分? (即鼠标按下 + 拖动应该移动......)

我想要实现的示例: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 上设置比例属性。在您的情况下,您没有任何东西,因此您可以扩展舞台。

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

或者您可以将您的对象放在一个组中并缩放该组。

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

group.add(text);

关于javascript - 滚动/缩放 pixi.js Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25823736/

相关文章:

javascript - 为什么我不能在控制台中循环滚动浏览器窗口?

html - 固定在手机上的背景位置有问题

html - 浏览器无法再看到保存的 CSS

javascript - JQuery Mobile 自动添加奇怪的加载消息

android - 如何用手指在ImageView Bitmap上绘制并获取坐标并保存绘制的图像

javascript - 在 Canvas 内移动矩形

javascript - 如何使用jsonp来提醒整个html代码?

javascript - 如何在按键时获取 div 的内容,以便它还包含在该按键时输入的文本?

javascript - WTForms-Javascript : pass onclick to WTF field

python - 通过 Selenium/Python 抓取 <canvas> 像素