午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

Pixtack紫陽花2.7.84.165_文字の描画で文字間指定ができるようになった(横書きの時だけ)

┠Pixtack紫陽花 #ソフトウェア
前回は2日前
 
 
文字の描画で
横書きの時だけ文字間を調節できるようにした
各タブにおいて色の透明度の設定で透明、半透明、不透明ボタンを追加した
それぞれ色1の透明度を0，128，255にする
 
文字の間隔
イメージ 1
やっとできた！
 
イメージ 2
赤枠のところの字間で指定する
-100から100まで1刻み、単位はピクセル
 
イメージ 3
マイナスの値が大きいと表示がおかしくなる
-60の時のように無駄に画像サイズが大きくなる
 
イメージ 4
行間の調整と併用できる
グラデーションのつき方が0と0以外の時で変化するのは行間の調整と同じ
文字間を指定しての文字の描画
普通の文字の描画は
Graphics.DrawString(描画する文字列, フォント, ブラシ, 描画位置)
で、文字列をまとめて渡すだけ
でもDrawStringには文字間の指定はなさそうなので自分で何とかすることになって
1文字づつDrawStringで画像にして、できあがった画像をDrawImageで
位置調節してペタペタ貼っていく感じにした
Graphics.DrawImage(1文字の画像、描画位置)
画像を貼っていく描画する位置は、単純に前の文字の隣に貼ればいいかと思っていたらこれが違う
 
ＭＳ　Ｐゴシック、サイズ30の場合
イメージ 5
Piまとめて描画した時の横幅は48なのに
別々に描画するとPが39、iが23で合計62になる
もし文字間の指定が1ならPとiが1離れるから48+1＝49になればいいことになるけど
1文字づつ描画してPの隣にiを描画する横位置は
Pの横幅39と文字間指定の1を足した40になるので
全体の画像の横幅は40＋23＝63、全然期待通りにならない
 
まず1文字づつ描画して合計49にするには、iの描画位置をもっと左にする必要がある
答えは49-23＝26、26にiを描画すればいい、26の位置に幅23のiを貼れば合計49
 
この描画する位置26を求めるのに必要なのが
1文字目から位置を求める文字までまとめて描画した時の横幅の48と
描画する文字画像の横幅の23と
文字間指定の数値の
3つってことになる
文字を描画した時の横幅を取得するのは
Graphics.MeasureString
 
文字数分この処理をしているから普通の文字の描画に比べると
かなり手間なことになっている
こうしてみると単純なことだけど難しかった、時間がかかった
 
1文字ごとの描画幅
イメージ 6
左がＭＳ　Ｐゴシック
右がＭＳ　ゴシック
どちらもフォントサイズ30
最初は固定幅フォントのＭＳ　ゴシックでテストしていて描画幅は半角と全角の
2種類だから1文字ごとに測らなくてもいいと思っていた時期もありました
 
 
ダウンロード
ヤフーボックス
 
 
次回は翌日