在 Dart 中全屏并按名称检索属性

Question

我正在使用 Dart 制作 HTML5 画布全屏。可悲的是，每个浏览器都有另一个前缀版本的 Fullscreen API，而 Dart 没有跟踪它。因此，大多数情况下 Dart 提供的方法不起作用。 我发现这个“hack”可以很好地进入全屏：

JsObject canvasElement = new JsObject.fromBrowserObject(_canvas);

List<String> methods = ["requestFullscreen", "mozRequestFullScreen", "webkitRequestFullscreen", "msRequestFullscreen"];
for(String method in methods){
  if(canvasElement.hasProperty(method)){
    canvasElement.callMethod(method);
    _canvas.width = window.screen.width;
    _canvas.height = window.screen.height;
    return;
  }
}

我的问题如下： 当按下“Escape”或“F11”时，全屏将关闭，但画布不会调整回正常大小。我试图手动覆盖此键的 KeyDown 事件，但在这种特殊情况下，我的浏览器（Google Chrome / Dartium）似乎无法识别该事件...

显然我需要知道浏览器是否处于全屏模式以相应地调整画布大小。有没有办法以类似于我可以访问方法document.requestFullscreen, document.webkitRequestFullscreen etc. 的方式检索Fullscreen API docs 中假定的javascript 属性document.fullscreenElement, document.webkitFullscreenElement, document.msFullscreenElement？

非常感谢您的帮助...

Answer 1

好吧，我现在开始工作了。我将在这里写一个答案，因此有类似问题的人可能会找到解决方案：

您可以在 dart 中访问大多数供应商特定的全屏 API 方法，如this answer 中所述。此外，如果属性存在，确实有一种访问属性的方法，正如您在上面提到的答案中提供的代码的最低方法中看到的那样......

当按 F11 或 Esc 切换全屏模式时，我对浏览器没有抛出 keydown 事件是正确的。我了解到可以通过调用event.preventDefault() 然后手动切换全屏来防止这种情况。我的全屏管理的完整源代码如下：

void init(){
    ....

    // initiate variables needed for fullscreen management
    _fullscreenTimer = new DateTime.now().millisecondsSinceEpoch;
    _fullscreen = false;

    // setup event handler, thus pressing F11 toggles fullscreen
    window.onKeyDown.listen((KeyEvent e) {
        if (e.keyCode == KeyCode.F11) {
        // prevent going fullscreen without noticing
        e.preventDefault();

        // get current time
        int now = new DateTime.now().millisecondsSinceEpoch;

        // only toggle fullscreen when last toggle was at least 500ms before
        if ((now - _fullscreenTimer) >= 500) {
            // toggle fullscreen
            if (!_fullscreen) {
                _requestFullscreen();
            } else {
                _exitFullscreen();
            }

            // reset timer to current time
            _fullscreenTimer = now;
            }
        }
    });
}

void resize() {
    // the element currently in fullscreen mode
    var fullscreenElement = _getFullscreenElement();

    // check whether there was a change to or from fullscreen
    if (!_fullscreen && fullscreenElement != null) {
        _fullscreen = true;

        _canvas.width = window.screen.width;
        _canvas.height = window.screen.height;
    } else if (_fullscreen && fullscreenElement == null) {
        _fullscreen = false;

        _canvas.width = _originalWidth;
        _canvas.height = _originalHeight;
    }
}

/// requests fullscreen by calling the corresponding methods of each vendor
void _requestFullscreen() {
    _callMethods(_canvas, ['requestFullscreen', 'webkitRequestFullscreen', 'mozRequestFullScreen', 'msRequestFullscreen', 'oRequestFullscreen']);
}

/// exits fullscreen by calling the corresponding methods of each vendor
void _exitFullscreen() {
    _callMethods(document, ['exitFullscreen', 'webkitExitFullscreen', 'mozCancelFullScreen', 'msExitFullscreen', 'oExitFullscreen']);
}

/// checks whether fullscreen is active by getting the corresponding property of each vendor
dynamic _getFullscreenElement() {
    return _getProperty(document, ['fullscreenElement', 'webkitFullscreenElement', 'mozFullScreenElement', 'msFullscreenElement', 'oFullscreenElement']);
}

/// calls the first matching method of a browser object
dynamic _callMethods(dynamic browserObject, List<String> methods) {
    JsObject js = new JsObject.fromBrowserObject(browserObject);

    for (String method in methods) {
      if (js.hasProperty(method)) {
        return js.callMethod(method);
      }
    }

    return null;
}

/// retrieves the first matching property of a browser object
dynamic _getProperty(dynamic browserObject, List<String> properties) {
    JsObject js = new JsObject.fromBrowserObject(browserObject);

    for (String property in properties) {
        if (js.hasProperty(property)) {
            return js[property];
        }
    }

    return null;
}