Phaser 画布上的 Dom 元素

Question

我可以在画布上只制作选择性的 DOM 元素，而不是所有 DOM 元素吗？

我尝试在谷歌上搜索，但到处的答案都不清楚，但有些“否”。我对移相器只有基本的了解。我正在使用版本phaser 3.55.2和reactjs。

我知道我可以在移相器画布上放置 DOM 元素，也可以在 DOM 上放置移相器画布。

我使用移相器图形制作了网格线和其他对象（可拖动），然后在画布下方制作了一些 DOM 元素。所以问题是网格线出现在我不想要的 DOM 元素之上。

phaserDOM.style.zIndex = '-10';

然后我将上面的代码更改为

phaserDOM.style.zIndex = '10';

，它需要画布上方的 DOM 元素，如下所示，这是完美的

但是现在，在第二种情况下，对象不可拖动，因为它们位于 DOM 下方。

我想问我可以只在画布上选择性地制作DOM元素，而不是所有DOM元素吗？

简单地说，我希望白色矩形出现在网格线的顶部，同时，我的橙色对象也应该是可拖动的。

我也尝试过设置元素的 zIndex 但它不起作用。

const el = document.createElement('div');
    el.style.width = '100px';
    el.style.height = '100px';
    // el.style.zIndex = '9999';
    el.style.backgroundColor = 'white';
    const t = this.add.dom(100, 100, el);
    // t.setDepth(999);

下面是我的移相器配置文件

import Phaser from 'phaser';

import GameScene from './GameScene';

export function getDummyGame() {
  const config = {
    type: Phaser.CANVAS,
    parent: 'dummy',
    scale: {
      mode: Phaser.Scale.RESIZE,
      autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    dom: {
      createContainer: true,
      behindCanvas: false,
    },
    transparent: true,
    scene: [GameScene],
  };

  return new Phaser.Game(config);
}

Answer 1

简短的回答（开箱即用） 据我所知，没有。

也就是说，您可以使用不可见的 GameObject 进行一些小的解决方法，并且“拖动时”只需更新 DOMElement 的位置。并不完美，但可以用于某些用例。

迷你演示示例：

document.body.style = 'margin:0;';

    class TestScene extends Phaser.Scene {
        create() {
            this.add.text(10, 10, 'Drag the Red DOMElement', )
                .setScale(1.5)
                .setColor('#000000')
                .setOrigin(0)
                .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });
            const domGOSize = 50;
            const el = document.createElement('div');
            el.style.width = `${domGOSize}px`;
            el.style.height = `${domGOSize}px`;

            el.style.backgroundColor = 'red';
            const domGO = this.add.dom(100, 80, el);
            this.add.line(0, 0, 0, 0, 600, 200, 0x0);

            this.workaroundHelper = this.add.rectangle(domGO.x, domGO.y, domGOSize, domGOSize);

            this.workaroundHelper.setInteractive({ draggable: true, hitArea: new Phaser.Geom.Rectangle(domGO.x, domGO.y, domGOSize, domGOSize) });

            this.workaroundHelper.on('drag', function (pointer, dragX, dragY) {
                domGO.x = dragX;
                domGO.y = dragY;
            });
        }
    }

    var config = {
        type: Phaser.CANVAS,
        parent: 'phaser-example',
        width: 536,
        height: 183,
        dom: {
            createContainer: true,
            behindCanvas: false,
        },
        transparent: true,
        scene: [TestScene],
    };

    new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
<div id="phaser-example" style="margin:10px;"></div>