Question

我正在学习 PixiJS 来制作这样的动画： http://fetedelabiere.promo-agency.com/ 。

我已经创建了一个项目环境。但我正在努力创造一个大舞台，并在其中进行拖动/轻弹互动，就像上面提到的网站中那样。

我应该如何制作一个带有拖拽的大舞台？在使用 PixiJS 创建的画布内轻弹？

到目前为止，这是我的JavaScript代码：

var screen_width = $(window).innerWidth();
var screen_height = $(window).innerHeight();
var renderer = PIXI.autoDetectRenderer(screen_width, screen_height, {backgroundColor: 0xcccccc});
var stage = new PIXI.Container();
var texture = new PIXI.Texture.fromImage('images/pixel.jpg');
var bg = new PIXI.Sprite(texture);

$('body').append(renderer.view);
bg.position.x = 0;
bg.position.y = 0;
stage.addChild(bg);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}

animate();

我不知道如何：

绘制1：1大小的背景图像。此图片的尺寸超过 1920x1800 。
实施阻力＆amp;如果图像超出视口/屏幕大小，则轻弹交互。

感谢。希望有人能为我提供一些参考资料。

如何用拖拉机制作一个大舞台使用Pixi.js在画布中轻弹？

0 个答案: