imgui テキストを中心に表示 – FlyWithLua

2023年2月24日

テキストを中心に配置するという良く使うスクリプト。

FlyWithLua|imgui テキストをウインドウの中心に表示

float_wnd_set_imgui_builderを使った場合

ポイントは12行目から19行目まで。
17行の「text_width」は字数ではなく字のサイズ(長さ)になる。
18行の「win_width / 2 – text_width / 2」は、ウインドウサイズは「400」、テキストサイズは「91」になるので、400÷2 – 91÷2 は (400÷2) – (91÷2)ということで「154.5」になる。
つまり、ウインドウの左から「154.5」の位置からテキストが始まるということになる。この位置はウインドウの幅が変化するとリアルタイムにに計算し直して、常に中央に配置することになる。
割り算と掛け算に足し算や引き算がある場合は、割り算と掛け算を最初に計算するのがルール。

GetCursorPosX と GetCursorPosY は、次のウィジェットが配置される位置を返します。

filename.lua

天地もウインドウの中心にテキストを配置する場合

18行目を以下のように変更

imgui.SetCursorPos(win_width / 2 – text_width / 2, win_height / 2 – text_height / 2)

float_wnd_set_ondrawを使った場合(日本語が使える)

float_wnd_set_ondrawを使うと日本語が使えるので、これを主体に使いたい。
しかし、上と同じようにテキストの長さを取得する方法だと、表示されるフォントが違うために長さが正確ではないという問題が起こっている。そこでテキストの数を数値で取得する方法を考えて見た。

10行目の「text_leng = string.len(text2)」がテキストの数を取得する。

日本語を使う場合

日本語と英語ではテキストの数が違う。英語の場合はそのままのテキスト数で所得できるが、日本語だと3倍のテキスト数になる。

11行目で日本語用のテキストを中心に表示する位置を設定している。これでうまく行った。
もしずれる場合は、(text_leng / 1.2) – text_leng を調整する必要がある。

filename.lua

英語を使う場合

11行目を以下のようにするとうまく行った。こちらはtext_lengに2を掛けている。

draw_string( x + ((win_Width2 / 2) – (text_leng * 2) – text_leng), y + 0, text2, “yellow”)

ボタンを作成してテキストを中心に入れる

テキストの長さに応じてボタン枠を広げることができる。しかしこれは近い感じにはできるが、文字の長さを正確に測る方法が分からないので実現が難しい。バイト数での取得はできるが英語はその文字数でちゃんと数えることができるが、日本語は1文字が3バイトに数えられるので設定が面倒になってしまう。
手作業で調整をするしか方法がないことになる。
英語の1バイトもテキストの形によって長さが変化するので正確な長さを測定できない。

(日本語用)

28行目で日本語の長さを取得している(半角英数字とは長さが違うので一工夫が必要)、(text_leng*4)で長さを4倍にしている。これでうまく日本語の長さに対応できるようになる。

measure_string(“ABCDEFG”, “Helvetica_12”)

filename.lua

英(半角英数字)用

残念ながら完璧では無い、字数が変化するとうまく長さを調整できない。これはstring.len(text_value)では1文字1バイトと計算しているだけで、同じバイト数でも英語の文字は幅がバラバラなので全体の長さが変化する。従って全体の長さはバラバラで正確な寸法にならないからである。
後は手作業で調整するしか方法が無い。

graphics.draw_rectangle(x1 + pos_left, y1 – pos_top – 0, x2 + pos_right + (text_leng*9), y2 – pos_top – 20) –長方形

imguiボタンの下にテキストを中心に入れる

ポイントはボタンの中心を探すこと、その位置からテキストの長さを半分にして引くと半分だけ前に移動することになるのでテキストが中心にくる。

filename.lua