полное окно по центру холста - PullRequest
Новая
       8

полное окно по центру холста

0 голосов
/ 29 апреля 2019

Привет сообществу стеков!

Прежде всего, я пытался найти похожую тему для своей проблемы, но не нашел полезного ответа.

Я хотел быиметь холст (используя 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.Заранее спасибо, если поможете.

...