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

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

与dart chrome、js chrome、js opera一起运行

双击时进入和退出全屏工作

m_oCanvas.width=（window.screen.width*0.75）.toInt（）原因 画布居中，宽度的75%

当使用“esc”退出全屏时，会调用HandleSevent， document.fullscreenElement正确（null或canvas）。 esc检测“m_bFullScreen&&document.fullscreenElement==null” 工作

在firefox中作为js运行，在ie中作为js运行

只能通过双击进入全屏工作，不能退出

m_oCanvas.width=（window.screen.width*0.75）.toInt（）原因 覆盖整个屏幕的放大画布

使用“esc”退出全屏时，不会调用HandleSevent。 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();
}

库全屏测试；
导入“dart:html”；
导入“dart:js”；
void FullScreen解决方案（CanvasElement画布）
{
var canv=新的JsObject.fromBrowserObject（画布）；
if（canv.hasProperty（“requestFullscreen”））{
canv.callMethod（“请求全屏”）；
}
否则{
列出供应商=['moz'、'webkit'、'ms'、'o']；
for（供应商中的字符串供应商）{
字符串vendorFullscreen=“${vendor}RequestFullscreen”；
如果（供应商=‘moz’）{
vendorFullscreen=“${vendor}RequestFullScreen”；
}
if（canv.hasProperty（供应商全屏））{
canv.callMethod（供应商全屏）；
回来
}
}
}
}
void exitfullscreen解决方法（）
{
var doc=新的JsObject.fromBrowserObject（文档）；
if（doc.hasProperty（“exitFullscreen”））{
doc.callMethod（“exitFullscreen”）；
}else if（doc.hasProperty（“mozCancelFullScreen”））{
doc.callMethod（“全屏”）；
}else if（doc.hasProperty（“webkitextfullscreen”））{
doc.callMethod（“webkitextfullscreen”）；
}else if（doc.hasProperty（“msExitFullscreen”））{
doc.callMethod（“msExitFullscreen”）；
}
}
类C_游戏处理器
{
画布渲染上下文2D m_oContext；
拉票元素m_oCanvas；
国际货币基金组织；
C_GameHandler（CanvasElement画布）
{
m_oCanvas=画布；
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；
如果（满屏）{
全屏幕解决方案（m_oCanvas）；
m_oCanvas.width=（window.screen.width*0.75）.toInt（）；
m_oCanvas.height=（window.screen.height*0.75）.toInt（）；
}否则{
ExitFullscreenWorkaround（）；
m_oCanvas.width=_m_iOrginalCanvasW；
m_oCanvas.height=_m_iOrginalCanvasH；
}
}
void HandleDClick（MouseEvent事件）
{
切换全屏（）；
}
无效处理费（事件e）
{
//不可靠，不能使用
if（document.fullscreenElement==null）
打印（'onFullscreenChange off\n'）；
else打印（'onFullscreenChange on\n'）；
}
布尔循环（双倍时间）
{
//检测用户是否已取消全屏（使用esc）
if（m_bFullScreen&&document.fullscreen元素==null）{
打印（“日志1”）；
//ExitFullscreenWorkaround（）；
m_oCanvas.width=_m_iOrginalCanvasW；
m_oCanvas.height=_m_iOrginalCanvasH；
m_bFullScreen=假；
}
如果（！m_bFullScreen&&document.fullscreen元素==m_oCanvas）{
打印（“日志2”）；
}
//画点东西
m_oContext.fillStyle=“绿色”；
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）；
//继续循环
这是._renderFrame（）；
返回true；
}
void Start（）
{
window.onDoubleClick.listen（HandleDClick）；
document.onfullscreenschange.listen（HandleFSEvent）；
这是._renderFrame（）；
}
void _renderFrame（）{
window.requestAnimationFrame（（num-time）{this.Loop（time）；}）；
}
}
void main（）
{
C#u GameHandler oGame=新的C#u GameHandler（querySelector（“#网络游戏画布”）；
oGame.Start（）；
}

我从全屏切换改为只填充窗口，这主要是因为移动浏览器似乎还不支持全屏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);