Как изменить размер текста и добавить значок на панель RexUI?

здесь я пытаюсь создать прокручиваемую панель, создав эту небольшую панель

const COLOR_PRIMARY = 0x4e342e;

var CreatePanel = function (scene) {
    var panel = scene.rexUI.add.sizer({
        width: 100,
        orientation: 'y',
        space: { item: 4 }
    })

    for (var i = 0; i < 50; i++) {
        var name = `item-${i}`;
        var label = scene.rexUI.add.label({
            height: 350,
            width: 1500,
            background: scene.rexUI.add.roundRectangle({
                color: COLOR_PRIMARY
            }),
            
            text: scene.add.text(
                10, 
                10, 
               
                'Lorem Ipsum is simply dummy text of the pinting'),
            name: name,
        })
        panel.add(label, { expand: true });
    }

    return panel;
}

но я не знаю, как добавить изображение в качестве значка и как изменить размер текста внутри панели. я добавил setWordWrapWidth, но когда я набираю длинное слово, я больше не могу переносить его Пожалуйста помоги!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В зависимости от вашего варианта использования вы можете использовать setFontSize (ссылка на документацию ) или setScale в тексте GameObject ( ссылка на документацию).

Для изображения/значка просто используйте свойство icon (подробности см. в документации плагина ).

Вот короткая демонстрация:

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

class ExampleScene extends Phaser.Scene {
    constructor() {
        super('ExampleScene');
    }

    preload() { 
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });
    }
    create() {
    
      let graphics  = this.make.graphics();
      graphics.fillStyle(0xffffff);
      graphics.fillRect(0, 0, 10, 10);
      graphics.generateTexture('icon', 10, 10);

      var panel = this.rexUI.add.sizer({
            x: 10, y: 10,
            width: 300, 
            height: 100,
            orientation: 1
        }).setOrigin( 0 );

      panel.add(this.rexUI.add.label({
            x: 0, 
            y: 0,
            text: this.add.text( 0,  0, 'Label 1 Normal Text'),
            icon: this.add.image(0, 0, 'icon'),
            squareFitIcon: true,
            space: {
                left: 10, right: 10, top: 10, bottom: 10,
                icon: 10, text: 10,
            }
        }),  { proportion: 1, expand: true });
      panel.add(this.rexUI.add.label({
            x: 0, 
            y: 40,
            text: this.add.text( 0, 0, 'Label 2 18px Text')
              .setFontSize('18px'),
            icon: this.add.image(0, 0, 'icon'),
            squareFitIcon: true,
            space: {
                left: 10, right: 10, top: 10, bottom: 10,
                icon: 10, text: 10,
            }
        }),  { proportion: 1, expand: true });
        panel.add(this.rexUI.add.label({
            x: 0, 
            y: 80,
            text: this.add.text( 0, 0, 'Label 3 Scale x1.25 Text')
              .setScale(1.25),
            icon: this.add.image(0, 0, 'icon'),
            squareFitIcon: true,
            space: {
                left: 10, right: 10, top: 10, bottom: 10,
                icon: 10, text: 10,
            }
        }),  { proportion: 1, expand: true });
        
        panel.layout();
    }
}

var config = {
    width: 536,
    height: 183,
    scene: [ ExampleScene ],
    parent: 'phaser-example',
    banner: false
}; 

new Phaser.Game(config);
console.clear();
<script src = "//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
<div id = "phaser-example"></div>

Обновление к вопросу из комментария:
Как уже упоминалось в комментарии, есть много вариантов решения этой проблемы. Самый простой способ — «вложить» измерительный прибор.

Короткая демонстрация:
Эта демонстрация основана на этом примере, в примере используется один значок, я изменил его так, чтобы можно было отображать два значка, в свойствах icon1 и icon2.

const Random = Phaser.Math.Between;

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/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });    
    }

    create() {
    
        this.createTexureForIcons();
    
        var x = config.width/2,
            y = config.height/2,
            minWidth = 300,
            minHeight = undefined,
            table = {
                title: 'Title/Title/Title',
                data: [{
                        icon1Texture: 'icon1',
                        icon2Texture: 'icon2',
                        name: 'AAA',
                        content: 'Hello',
                    },
                    {
                        icon1Texture: 'icon1',
                        icon2Texture: 'icon3',
                        name: 'BBBB',
                        content: 'World',
                    },
                ]
            };

        var sizer = getTable(this, x, y, minWidth, minHeight, table);
        sizer.drawBounds(this.add.graphics(), 0xff0000);
    }
    
    createTexureForIcons(){        
        let graphics  = this.make.graphics();
        graphics.fillStyle(0xffffff);
        graphics.fillRect(0, 0, 10, 10);
        graphics.generateTexture('icon1', 10, 10);
        graphics.fillStyle(0xff0000);
        graphics.fillRect(0, 0, 10, 10);
        graphics.generateTexture('icon2', 10, 10);
        graphics.fillStyle(0x00ff00);
        graphics.fillRect(0, 0, 10, 10);
        graphics.generateTexture('icon3', 10, 10);
        graphics.fillStyle(0x0000ff);
        graphics.fillRect(0, 0, 10, 10);
        graphics.generateTexture('icon3', 10, 10);
    }
}

var getRow = function (scene, data) {

    var icon1 = scene.add.image(0, 0, data.icon1Texture);
    var icon2 = scene.add.image(0, 0, data.icon2Texture);
    var nameLabel = scene.add.text(0, 0, data.name, {
        fontSize: '24px',
        color: 'white'
    });
    var contentLabel = scene.add.text(0, 0, data.content, {
        fontSize: '24px',
        color: 'white'
    });
    var sizer = scene.rexUI.add.sizer({
            orientation: 'x',
        })
        .add(icon1, {expand: true, fitRatio: true})
        .add(icon2, {expand: true, fitRatio: true})
        .add(nameLabel, 2, 'left')
        .add(contentLabel, 5, 'left');
    return sizer;
}

var getTable = function (scene, x, y, width, height, table) {
    var title = scene.add.text(0, 0, table.title, {
        fontSize: '32px',
        color: 'white'
    });

    var sizer = scene.rexUI.add.sizer(x, y, width, height, {
            orientation: 'y',
        })
        .add(title);

    var padding = {
        top: 10,
        //bottom: 10,
        left: 10,
        right: 10,
    }
    var data = table.data;
    for (var i = 0, cnt = data.length; i < cnt; i++) {
        sizer.add(getRow(scene, data[i]), 0, 'left', padding);
    }
    sizer.layout();
    return sizer;
}

var config = {
    width: 510,
    height: 180,
    scene: Demo
};

var game = new Phaser.Game(config);
<script src = "//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

Большое спасибо. Могу ли я задать еще один вопрос? Когда я пытаюсь увеличить размер текста, ширина панели автоматически увеличивается. Знаете ли вы, как этого избежать?

Nguyễn Hải Long 02.07.2024 05:42

На самом деле все зависит от вашего варианта использования, мне пришло в голову, что вы можете ограничить размер метки, обернув длинный текст, с помощью этой функции setWordWrapWidthссылка на документацию, ссылка на эту панель не должна расширяться, но текст будет состоять из нескольких строк.

winner_joiner 02.07.2024 06:24

большое спасибо, я отредактировал свой вопрос, можете ли вы дать мне другой ответ. большое спасибо и извините за мой ломаный английский

Nguyễn Hải Long 02.07.2024 06:40

Ну, проблема в том, что фазер не может переноситься, если нет пробелов, но вы можете использовать функцию/свойство метки плагина rexUI wrapText, вам придется установить его на 2, это разбивает текст даже без пробелов.

winner_joiner 02.07.2024 07:31

большое спасибо. Я работаю так, как хочу. ты буквально спасатель жизни

Nguyễn Hải Long 02.07.2024 08:57

Можете ли вы помочь мне, как добавить значок множителя в одну метку, я несколько раз читал документацию rexUi, но не могу найти, как добавить 3 или 4 значка вместо одного

Nguyễn Hải Long 02.07.2024 09:15

Я думаю, что обычный сайзер не может добавлять несколько значков, но вы можете попробовать использовать плагинgridSizer. ссылка на документацию. В верхней части этой страницы есть несколько примеров. Или вы можете попробовать раскройные размеры, но это будет довольно сложно. Или создайте свой собственный класс изображений (который выводит/объединяет несколько изображений). Лучший способ зависит от вашего конкретного варианта использования.

winner_joiner 02.07.2024 11:33

Извините, что снова беспокою вас, но я не могу найти способ добавить значок в размер. Вы можете быть более конкретным

Nguyễn Hải Long 04.07.2024 10:25

@ViễnThôngĐiệntử Я обновил свой ответ решением, надеюсь, это поможет.

winner_joiner 04.07.2024 11:22

@ViễnThôngĐiệntử Я обновил свой ответ, чтобы он работал для изображений. Кстати: вам следует создать новый вопрос, а не задавать дополнительный вопрос в комментариях (если это новый вопрос). Так как на StackOverflow должны быть вопросы/ответы должны быть сосредоточены (Статья по SO-вопросам ).

winner_joiner 05.07.2024 10:51

Другие вопросы по теме