Question

你好，堆栈社区！

首先，我尝试搜索相似的主题来查找问题，但没有找到有用的答案。

我想要一个画布（使用pixi js），该画布完全填充浏览器窗口并且始终居中，例如在此示例中：https://tympanus.net/Development/LiquidDistortion/

我已经在这里下载了源代码：https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/
该代码非常干净，似乎只能使用Javascript和css3来实现。
我试图通过对该函数进行编码来复制逻辑：

function initPixi () {

    viewWidth = 1920;
    viewHeight = 1080;
    renderer = new PIXI.autoDetectRenderer( viewWidth, viewHeight, { transparent: true });

    renderer.view.style.objectFit = 'cover';
    renderer.view.style.width     = '100%';
    renderer.view.style.height    = '100%';
    renderer.view.style.top       = '50%';
    renderer.view.style.left      = '50%';
    renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.2)';
    renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.2)';

    // add to DOM
    let backgroundImg = document.getElementById('BackgroundContainer');
    backgroundImg.appendChild(renderer.view);

    // create stage
    stage = new PIXI.Container();
    stage.width = viewWidth;
    stage.height = viewHeight;

    // load images
    loader = PIXI.loader;
    loader.add("img/gradiant_danse.jpg");
    loader.once("complete", onAssetsLoaded);
    loader.load();
}

function onAssetsLoaded () {

    var bg = new PIXI.Sprite.fromImage("img/gradiant_danse.jpg");
    bg.x = renderer.width / 2;
    bg.y = renderer.height / 2;

    stage.addChild(bg);
    renderer.render(stage);
}

将画布完全居中并适合视口，我无法达到相同的效果。这是我的结果：http://www.300k.com/shared/image.jpg
我缺少什么！抱歉，我是CSS3的新手。如果可以帮助我，请先谢谢您。

全屏居中画布

0 个答案: