canvas - 如何在Dart中设置和取消全屏 Canvas

Question

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

使用Dart Chrome，JS Chrome，JS Opera运行

双击可以进入和退出全屏

m_oCanvas.width =(window.screen.width * 0.75).toInt()原因
居中且宽度为

的75％的 Canvas

当以“esc”退出全屏显示时，HandleFSEvent被调用，
document.fullscreenElement是正确的(null或canvas)。
esc检测“m_bFullScreen && document.fullscreenElement == null”
作品。

在Firefox中以JS运行，在ie中以JS运行

仅通过双击进入全屏作品，而不退出

m_oCanvas.width =(window.screen.width * 0.75).toInt()原因
覆盖整个屏幕的放大 Canvas 。

如果使用“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);