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

Question

问题在于不同浏览器之间的不一致性。

运行与飞镖铬，js铬，js歌剧

1. 双击时，进入和退出全屏工作
2. m_oCanvas.width =(window.cre.Width*0.75).toInt()导致画布以中心和宽度的75%为中心
3. 当使用'esc‘退出全屏时，HandleFSEvent会被调用，document.fullscreenElement是正确的(null或画布)。esc检测"m_bFullScreen && document.fullscreenElement==null“起作用。

在firefox中以js的形式运行，在ie中作为js运行

1. 仅通过双击进入全屏工作，而不是退出。
2. m_oCanvas.width =(window.cre.Width*0.75).toInt()会导致画布放大，覆盖整个屏幕。
3. 当使用“esc”退出全屏时，HandleFSEvent不会被调用。esc检测"m_bFullScreen && 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);