Question

问题是不同浏览器之间的不一致。

使用dart chromium，js chrome，js opera

运行

进入和退出全屏模式
m_oCanvas.width =（window.screen.width * 0.75）.toInt（）原因一个居中且宽度为75％的画布
使用'esc'退出全屏时，会调用HandleFSEvent， document.fullscreenElement是正确的（null或canvas）。 esc检测“m_bFullScreen＆amp;＆amp; document.fullscreenElement == null” 作品。

在firefox中运行为js，在

只能通过双击进入全屏作品，而不是退出
m_oCanvas.width =（window.screen.width * 0.75）.toInt（）原因放大的画布，覆盖整个屏幕。
使用'esc'退出全屏时，不会调用HandleFSEvent。 esc检测“m_bFullScreen＆amp;＆amp; document.fullscreenElement == null” 不起作用，因为它有时会取消想要的全屏。

所以问题是如何通过双倍更改全屏/从全屏更改单击，并按全部屏幕按esc工作相同的全部浏览器。

main.dart：

library fullscreen_test;

import 'dart:html';
import 'dart:js';

void FullscreenWorkaround(CanvasElement canvas)
{
  var canv = new JsObject.fromBrowserObject(canvas);

  if (canv.hasProperty("requestFullscreen")) {
    canv.callMethod("requestFullscreen");
  }
  else {
    List<String> vendors = ['moz', 'webkit', 'ms', 'o'];
    for (String vendor in vendors) {
      String vendorFullscreen = "${vendor}RequestFullscreen";
      if (vendor == 'moz') {
        vendorFullscreen = "${vendor}RequestFullScreen";
      }
      if (canv.hasProperty(vendorFullscreen)) {
        canv.callMethod(vendorFullscreen);
        return;
      }
    }
  }
}
void ExitFullscreenWorkaround()
{
  var doc = new JsObject.fromBrowserObject(document);

  if (doc.hasProperty("exitFullscreen")) {
    doc.callMethod("exitFullscreen");
  } else if (doc.hasProperty("mozCancelFullScreen")) {
    doc.callMethod("mozCancelFullScreen");
  } else if (doc.hasProperty("webkitExitFullscreen")) {
    doc.callMethod("webkitExitFullscreen");
  } else if (doc.hasProperty("msExitFullscreen")) {
    doc.callMethod("msExitFullscreen");
  }
}

class C_GameHandler
{
  CanvasRenderingContext2D m_oContext;
  CanvasElement m_oCanvas;
  int _m_iOrginalCanvasW, _m_iOrginalCanvasH;

  C_GameHandler(CanvasElement canvas)
  {
    m_oCanvas = canvas;
    m_oContext = m_oCanvas.getContext("2d");
    _m_iOrginalCanvasW = m_oCanvas.width;
    _m_iOrginalCanvasH = m_oCanvas.height;
  }

  bool m_bFullScreen = false;
  void ToggleFullScreen()
  {
    m_bFullScreen = !m_bFullScreen;
    if(m_bFullScreen) {
      FullscreenWorkaround(m_oCanvas);
      m_oCanvas.width = (window.screen.width*0.75).toInt();
      m_oCanvas.height = (window.screen.height*0.75).toInt();
    } else {
      ExitFullscreenWorkaround();
      m_oCanvas.width = _m_iOrginalCanvasW;
      m_oCanvas.height = _m_iOrginalCanvasH;
    }
  }

  void HandleDClick(MouseEvent event)
  {
    ToggleFullScreen();
  }

  void HandleFSEvent(Event e)
  {
    //is unreliable, cant use
    if(document.fullscreenElement==null)
      print('onFullscreenChange off\n');
    else print('onFullscreenChange on\n');
  }

  bool Loop(double time)
  {
    //detect if user has canceled fullscreen (using esc)
    if( m_bFullScreen && document.fullscreenElement==null) {
      print('log 1.');
//      ExitFullscreenWorkaround();
      m_oCanvas.width = _m_iOrginalCanvasW;
      m_oCanvas.height = _m_iOrginalCanvasH;
      m_bFullScreen = false;
    }
    if(!m_bFullScreen && document.fullscreenElement==m_oCanvas) {
      print('log 2.');
    }

    //draw something
    m_oContext.fillStyle = "green";
    m_oContext.clearRect(0, 0, m_oCanvas.width, m_oCanvas.height);
    m_oContext.fillRect(m_oCanvas.width~/2, 0, 20, m_oCanvas.height);
    m_oContext.fillRect(0, m_oCanvas.height~/2, m_oCanvas.width, 20);

    // keep looping
    this._renderFrame();
    return true;
  }

  void Start()
  {
    window.onDoubleClick.listen(HandleDClick);
    document.onFullscreenChange.listen(HandleFSEvent);

    this._renderFrame();
  }

  void _renderFrame() {
    window.requestAnimationFrame((num time) { this.Loop(time); });
  }
}

void main()
{
  C_GameHandler oGame = new C_GameHandler(querySelector('#webplay-canvas'));
  oGame.Start();
}

Answer 1

我从全屏切换改为填充窗口，因为移动浏览器似乎还没有支持全屏API。它还解决了基于屏幕尺寸缩放的问题。

CSS

* {
  margin:0; padding:0;
}

html, body {
  width:100%; height:100%;
  margin: 0px;
  border: 0;
  overflow: hidden; /*  Disable scrollbars */
}

#canvas {
  background-color: black;
  display: block;
}

码

void ScreenSize()
{
  double dScale = 1.0;
  if(window.innerWidth>900) dScale = 0.75;
  if(window.innerWidth>1400) dScale = 0.5;
  m_oCanvas.width  = (window.innerWidth*dScale).toInt();
  m_oCanvas.height = (window.innerHeight*dScale).toInt();
  m_oCanvas.style.width = (window.innerWidth-0).toInt().toString()+'px';
  m_oCanvas.style.height = (window.innerHeight-0).toInt().toString()+'px';

  _m_oGraph.Init(m_oCanvas); //apply the new size
}

void OnResize(Event e)
{
  ScreenSize();
}

window.onResize.listen(OnResize);

如何在飞镖中设置和取消全屏画布

1 个答案: