在canvas / Phaser 3中创建表(优先级)

Question

任何人都可以帮助如何在Phaser-3(优先级)/画布中创建表吗？

像这样的桌子。

没有造型也可以。我只想知道如何在Phaser-3(优先级)/画布中创建表。

Answer 1

你可以尝试Rex UI插件

在这里你可以找到一个演示

其他演示(滚动，固定宽度-筛等)可用这里。

<footer><div id=version></div></footer>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #222;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 5px;
  top: 605px;
}

JS

const Random = Phaser.Math.Between;

const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() { 
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });      
    }

    create() {
        this.print = this.add.text(0, 0, '');

        var db = createDataBase(400);

        var tabs = this.rexUI.add.tabs({
                x: 400,
                y: 300,

                panel: this.rexUI.add.gridTable({
                    background: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_PRIMARY),

                    table: {
                        width: 250,
                        height: 400,

                        cellWidth: 120,
                        cellHeight: 60,
                        columns: 2,                     
                        mask: {
                            padding: 2,
                        },
                    },

                    slider: {
                        track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                        thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
                    },

                    // scroller: true,

                    createCellContainerCallback: function (cell) {
                        var scene = cell.scene,
                            width = cell.width,
                            height = cell.height,
                            item = cell.item,
                            index = cell.index;
                        return scene.rexUI.add.label({
                                width: width,
                                height: height,

                                background: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, COLOR_DARK),
                                icon: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 10, item.color),
                                text: scene.add.text(0, 0, item.id),

                                space: {
                                    icon: 10,
                                    left: 15
                                }
                            });
                    },
                }),

                leftButtons: [
                    createButton(this, 2, 'AA'),
                    createButton(this, 2, 'BB'),
                    createButton(this, 2, 'CC'),
                    createButton(this, 2, 'DD'),
                ],

                rightButtons: [
                    createButton(this, 0, '+'),
                    createButton(this, 0, '-'),
                ],

                space: {
                    leftButtonsOffset: 20,
                    rightButtonsOffset: 30,

                    leftButton: 1,
                },
            })
            .layout()
        //.drawBounds(this.add.graphics(), 0xff0000);

        tabs
            .on('button.click', function (button, groupName, index) {
                switch (groupName) {
                    case 'left':
                        // Highlight button
                        if (this._prevTypeButton) {
                            this._prevTypeButton.getElement('background').setFillStyle(COLOR_DARK)
                        }
                        button.getElement('background').setFillStyle(COLOR_PRIMARY);
                        this._prevTypeButton = button;
                        if (this._prevSortButton === undefined) {
                            return;
                        }
                        break;

                    case 'right':
                        // Highlight button
                        if (this._prevSortButton) {
                            this._prevSortButton.getElement('background').setFillStyle(COLOR_DARK)
                        }
                        button.getElement('background').setFillStyle(COLOR_PRIMARY);
                        this._prevSortButton = button;
                        if (this._prevTypeButton === undefined) {
                            return;
                        }
                        break;
                }

                // Load items into grid table
                var items = db
                    .chain()
                    .find({
                        type: this._prevTypeButton.text
                    })
                    .simplesort('id', {
                        desc: (this._prevSortButton.text === '-') // sort descending
                    })
                    .data();
                this.getElement('panel').setItems(items).scrollToTop();
            }, tabs);

        // Grid table
        tabs.getElement('panel')
            .on('cell.click', function (cellContainer, cellIndex) {
                this.print.text += cellIndex + ': ' + cellContainer.text + '\n';
            }, this)
            .on('cell.over', function (cellContainer, cellIndex) {
                cellContainer.getElement('background')
                    .setStrokeStyle(2, COLOR_LIGHT)
                    .setDepth(1);
            }, this)
            .on('cell.out', function (cellContainer, cellIndex) {
                cellContainer.getElement('background')
                    .setStrokeStyle(2, COLOR_DARK)
                    .setDepth(0);
            }, this);

        tabs.emitButtonClick('left', 0).emitButtonClick('right', 0);
    }

    update() {}
}

var createDataBase = function (count) {
    var TYPE = ['AA', 'BB', 'CC', 'DD'];
    // Create the database
    var db = new loki();
    // Create a collection
    var items = db.addCollection('items');
    // Insert documents
    for (var i = 0; i < count; i++) {
        items.insert({
            type: TYPE[i % 4],
            id: i,
            color: Random(0, 0xffffff)
        });
    }
    return items;
};

var createButton = function (scene, direction, text) {
    var radius;
    switch (direction) {
        case 0: // Right
            radius = {
                tr: 20,
                br: 20
            }
            break;
        case 2: // Left
            radius = {
                tl: 20,
                bl: 20
            }
            break;
    }
    return scene.rexUI.add.label({
        width: 50,
        height:40,
        background: scene.rexUI.add.roundRectangle(0, 0, 50, 50, radius, COLOR_DARK),
        text: scene.add.text(0, 0, text, {
            fontSize: '18pt'
        }),
        space: {
            left: 10
        }
    });
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Demo
};

var game = new Phaser.Game(config);