如何将 HaxeFlixel 画布放置在 Chrome 窗口的中心？

Question

目前，我正在学习 HaxeFlixel，我可以将画布中的文本居中，但我无法将画布放置在 chrome 窗口的中心。有没有办法做到这一点和Main.hx？

PlayState.hx：

package;

import flixel.FlxG;
import flixel.FlxState;
import flixel.text.FlxText;

class PlayState extends FlxState
{
    override public function create()
    {
        super.create();

        var text = new FlxText(0, 0, 0, "Hello World\n", 64);
        text.screenCenter();

        add(text);
    }

    override public function update(elapsed:Float)
    {
        super.update(elapsed);
        enterFullscreen();
    }

    public function enterFullscreen()
    {
        if (FlxG.keys.justPressed.ENTER)
        {
            FlxG.fullscreen = !FlxG.fullscreen;
        }
    }
}

Main.hx：

package;

import flixel.FlxGame;
import openfl.display.Sprite;

class Main extends Sprite
{
    public function new()
    {
        super();
        addChild(new FlxGame(0, 0, PlayState));
    }
}

请帮忙， 谢谢。

Answer 1

当您编译 HaxeFlixel 网络项目时，有两个部分： 所有 Haxe 代码都转换为 Javascript，在

<canvas>

HTML 对象内执行； HTML 页面的所有其余部分均取自模板，您需要更改它以使画布居中或以其他方式在侧面添加其他元素。

HaxeFlixel 使用的默认模板位于 Lime 项目内部：https://github.com/openfl/lime/blob/develop/templates/html5/template/index.html

您需要将该文件复制到您的项目中，例如在

assets/index.html

中；然后对其进行自定义，例如在

<center>

（将放置游戏画布的 div）周围添加

<div id="content"></div>

标签：

<center>
<div id="content"></div>
</center>

如果您愿意，也可以使用 CSS 将其居中。请小心触摸带有

::

的行，因为这些是模板指令。 将新模板放置在

assets/index.html

中后，在

project.xml

中添加此行：

<template path="assets/index.html" />

Answer 2

我也在研究这个问题，发现了这个：

https://community.openfl.org/t/scalemode-for-html/9695

这不是我使用的确切解决方案，但向我指出了

Project.xml

文件。当我检查时，该文件默认为 HTML5 设置

<window>

元素，如下所示：

<window if="html5" resizable="false" />

只需将

false

更改为

true

即可使画布扩展以填充屏幕，同时保持其纵横比。

鉴于此，您可以使用标准 CSS 技术，在嵌入 HTML

div

元素上使用 CSS 将结果居中，或者在整个页面上使用

iframe

嵌入。例如：

如何使元素水平和垂直居中