8.3 テキスト

Areaのテキスト

AreaではAttributedStringに文字列と属性を設定し、TextLayoutを作って描画します。

描画の流れ

段階	型	役割
文字列	`AttributedString`	テキストと部分ごとの属性
既定フォント	`FontDescriptor`	属性のない箇所のフォント
レイアウト	`TextLayout`	折り返し、揃え、描画サイズ
描画	`draw_text_layout`	レイアウトを指定座標へ描く

text = UIng::Area::AttributedString.new("Hello, Area")
text.set_attribute(
  UIng::Area::Attribute.new_color(0.1, 0.2, 0.6, 1.0),
  0, text.len
)
font = UIng::FontDescriptor.new(family: "Sans", size: 14)

handler.draw do |_area, params|
  UIng::Area::Draw::TextLayout.open(
    string: text, default_font: font,
    width: 240, align: :left
  ) do |layout|
    params.context.draw_text_layout(layout, 24, 24)
  end
end

TextLayout.openはブロック終了時にレイアウトを解放します。Contextはdraw中だけ有効です。

属性

set_attribute(attribute, start, end_)は、バイト範囲へ属性を適用します。UTF-8文字列では文字数をバイト位置として使わず、String#bytesize、AttributedString#len、byte_index_to_grapheme、grapheme_to_byte_indexで境界を扱います。

属性の生成	用途
`new_family("Sans")` / `new_size(16)`	フォントファミリー・サイズ
`new_weight(:bold)` / `new_italic(:italic)`	太さ・斜体
`new_stretch(:condensed)`	字幅
`new_color(r, g, b, a)`	文字色
`new_background(r, g, b, a)`	背景色
`new_underline(:single)`	下線
`new_underline_color(:custom, r, g, b, a)`	下線の色
`new_features(features)`	OpenType機能

start = text.len
text.append_unattributed(" important")
text.set_attribute(UIng::Area::Attribute.new_weight(:bold), start, text.len)
text.set_attribute(UIng::Area::Attribute.new_underline(:single), start, text.len)

set_attributeに渡したAttributeの所有権はAttributedStringへ移ります。同じAttributeを再利用・解放してはいけません。別の範囲へ適用する場合も新しく作ります。

幅、揃え、大きさ

widthは折り返しに使う最大幅です。alignは:left、:center、:rightから選びます。layout.extentsはレイアウトの幅・高さを返します。

UIng::Area::Draw::TextLayout.open(
  string: text, default_font: font,
  width: params.area_width - 48,
  align: :center
) do |layout|
  width, height = layout.extents
  params.context.draw_text_layout(layout, 24, 24)
end

TextLayoutは作成時に文字列とフォントをコピーします。静的なテキストはレイアウトを保持して再利用できますが、不要になった時点でfreeします。AttributedStringとFontDescriptorも保持する場合は終了時にfreeします。

basic_draw_text.crは属性付きテキストの例です。