холст неправильно отображает фон, когда вы вносите определенные изменения в размер браузера - PullRequest
Новая
       6

холст неправильно отображает фон, когда вы вносите определенные изменения в размер браузера

0 голосов
/ 10 января 2019

создание моей первой игры в phaser, когда вы растягиваете окно браузера за определенную точку, холст перестает отображаться, даже когда вы в полном размере и обновляете разрывы фона

Я пытался установить ширину и высоту холста при создании холста. Я также отредактировал css, чтобы попытаться решить проблему. Что делает этот случай уникальным, так это то, что холст не всегда ломается при изменении размера окна или полноэкранного браузера. Только когда вы сначала сделаете экран полноразмерным, а затем щелкнете по экрану, он сломается

перетаскивание окна за определенную точку делает это: https://imgur.com/a/Q5xX9RZ

изображение того, как фон выглядит при полном экране из окна браузера в полноэкранном режиме: https://imgur.com/a/gGO0QkP

https://embed.plnkr.co/gTKkhHfCgqoxI1BCQnnj/

Я полагаю, что эта проблема вызвана тем, что пространство рисования холста меньше, чем общий размер холста, из-за которого экран не помещается должным образом. В div id = game

отображается следующее 
      <canvas width="1872" height="1220" style="display: block; touch- 
      action: none; user-select: none; -webkit-tap-highlight-color: 
     rgba(0, 0, 0, 0); width: 363px; height: 237px; margin-left: 0px; 
      margin-top: 187px; margin-bottom: -186px;"></canvas>

Буду признателен за любую помощь, спасибо! 

       var canvas_width =  window.innerWidth * 
         window.devicePixelRatio;
        var canvas_height = window.innerHeight * 
         window.devicePixelRatio;
       var game = new Phaser.Game( canvas_width, canvas_height,  
         Phaser.AUTO, 'game', { preload: preload, create: create, 
         update: update })


        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
          }
html, body, #game{
       height: 100%;
       width: auto;

          }

    body{
    margin: 0; padding: 0;

          }
         </style>



         game.input.onDown.add(function(){
     game.scale.fullScreenScaleMode = 
             Phaser.ScaleManager.SHOW_ALL;

    if(game.scale.isFullScreen){
        game.scale.stopFullScreen();
    } else {
        game.scale.startFullScreen(false);
    }
        })
...