html 如何将图像动态更改为文本

wlwcrazw 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(150)

我正在使用Phaser制作一个在线游戏，我需要制作按钮，按钮上带有文本，可以根据文本进行更改，因为文本每次都可能不同。我尝试检查API文档，但当我放入获取大小函数以尝试获取文本的边界时，按钮消失或代码将停止工作，并显示无法读取未定义的属性的错误（阅读getBounds），而且每次我重新加载页面时，它都会在两者之间交换。

count = Phaser.Math.Between(1,4)
         for(let i = 50;i <= 750;i = i +200){
            bingus = this.add.text(i, 400, quiz[category][difficulty][quest][count])
            answs.push(bingus)
            gorp.push(count)
            count++
            }
            if(count > 4){
               count = 1
            }
         }

         this.butt1.setDisplaySize(Phaser.Geom.Rectangle.GetSize(answs[gorp[0]].getBounds()))

Html

来源：https://stackoverflow.com/questions/72819320/how-to-make-a-image-dynamically-change-to-text

1条答案

按热度按时间

p3rjfoxz1#

您可以将Phaser.GameObjects.Text及其displayWidth和/或displayHeight属性与全局Phaser.Display.Align.In.Center函数一起使用。
也许这也适用于你的用例。

基本上：

1.使用setText设置文本对象的文本
1.获取text对象的当前displayWidth和displayHeight
1.更新/调整按钮对象的大小，也使用displayWidth和displayHeight属性
1.使用Phaser.Display.Align.In.Center函数将文本对象居中放置在按钮对象内

下面是一个小型的工作演示：

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

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 180,
    scene: {
        create
    },
    banner: false
}; 

let text;
let button;
let texts = ['first Text', 'Next', 'Second Text', 'Last', 'multiline1.\nmultiline2..\nmultiline3...' ];
let padding = 20;

let currentTextIdx = 0;

function create () {
    this.add.text(10, 10, 'Text cycles about every second.')
    button = this.add.rectangle(250, 90, 100, 40, 0xff0000 )
        .setOrigin(.5);
    text = this.add.text(250, 90, texts[currentTextIdx])
        .setOrigin(.5);
        
    this.time.addEvent({ delay: 1000, startAt:999, loop: true , callback: _ => {
      currentTextIdx++;
      
      if(currentTextIdx >= texts.length){
           currentTextIdx = 0;
      }
      
      let newText =  texts[currentTextIdx];
      text.setText(newText);
      button.displayWidth = padding * 2 + text.displayWidth;
      button.displayHeight = padding * 2 + text.displayHeight;
      
      Phaser.Display.Align.In.Center(text, button);

    }});
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何将图像动态更改为文本

1条答案

相关问题

热门标签

最新问答