Google
読者です 読者をやめる 読者になる 読者になる

TECHHOT

色々書いてます。プログラミングのことも使えるかなと思ったら書きます。個人でブログとは関係なく運営しているワークショップのことについてもいずれはまとめて書いていきます。

スポンサーリンク

文字を中央に描画する方法がわからねえ!!!javaのdrawString()でテキストを画像の中央に配置する方法を感覚的に理解しよう

プログラミング 技術系 感覚 感覚知

hi-tech toilets of Japan

どうも技術者となると他人にわかりやすく説明することをせず自分の中だけで理解して、
逆にわからないやつはなんなの?的な風習があるから気持ち悪い。

さらに技術者の気持ち悪さの極みとしてハッカソンなどがあるがあんなの技術者の公開オナニープレイでしかない。

ハッカソンを簡単に言うと俺のオナニーの仕方を見てくれの場だ。
f:id:anmitsux:20170125213924p:plain

A君「俺は炭酸水にちんぽ突っ込むんだ!」

B君「いやいや、俺はTENGATENGA最高!!」

C君「お前ら邪道だな。俺は手だよ。この右手さ。」
こんな感じにしか思えない。

ということでそんな話は置いといて、

drawString()でテキストを中央に配置する時に、わかりやすく書いてるところがなかったので共有する。

drawstring()で中央配置するためにFontMetricsを使ってベースラインを考慮したy座標位置を導き出すやりかたがおおい。

このベースラインとかも、正直専門用語を使うなよ!(# ゚Д゚)と思う人は多数だと思う。

まあ技術者はオナニーが好きなんだ。許してくれ。

それではまずdrawStringとはから説明していく。

drawString()とは

WHAT?

String txt:描画する文字列を意味する
int x:文字列の先頭のx座標位置
int y:文字列の先頭のy座標位置

例を示す

Graphics2D gr2=new Graphics2D;
・
・  gr2にcreateGraphics()でGraphics2Dインスタンスを生成の処理を記述
・
gr2.drawString("あんみつ",0,0);

これはx座標、y座標から始まるあんみつ(テキスト)を記述するという意味である。

実際に背景画像を用意して文字列を描画して出力した際のイメージだ
f:id:anmitsux:20170125213407p:plain

あんみつという文字列の「あ」の左上隅が文字列座標の始まる基準位置となっている。

drawString()の直感的理解

ここでは極力図を多く使いdrawStringを説明する。

先ほどの画像を使って説明する。
f:id:anmitsux:20170125214141p:plain
赤で囲まれてる文字を基準に考える。

囲みの赤の左上隅の角に注目してほしい。

f:id:anmitsux:20170125214249p:plain

ズームしてみた。

次はdrawString("あんみつ",0,0)と指定した際x座標とy座標が文字列のどこに適用されているのかが知りたいよね

f:id:anmitsux:20170125214748p:plain

緑色のモジャモジャが赤い四角の左上隅にある。そこが基準点である。

それではdrawString("あんみつ",0,20)とすればどうなるのか?

f:id:anmitsux:20170125215107p:plain

ちょっと下へ下がる。*1

文字列を中央に描画しよう

それでは実際に中央に文字列を描画してみよう。*2

public static void drawStringCenter(Graphics g,String text,int x,int y){
         FontMetrics fm = g.getFontMetrics();
	 Rectangle rectText = fm.getStringBounds(text, g).getBounds();
	 x=x-rectText.width/2;
	 y=y-rectText.height/2+fm.getMaxAscent();
		
         g.drawString(text, x, y);
	}

これは文字列を中央に描画するメソッドだ。自身で作ったお好きなクラスにぶちこんで使ってみてほしい。

それでは解説だ。
1.引数にGraphics、描画するテキスト、中央x座標、中央y座標を用意
2.FontMetricsのインスタンスを生成する。GraphicsクラスのgをFontMetricsに変化する認識でいい。*3
3.Rectangleインスタンス、文字列の幅と高さを保有するrectTextを用意
4.x=(Graphics)gの中央のx座標-文字列の幅/2
  y=(Graphics)gの中央のy座標-文字列の高さ/2+ベースラインの高さ

まとめ

ざっくり図などを使って説明してみたが正直自分でも本当にわかりやすい説明かどうかはわからない。
実際に新しい技術を身に着けるのにいきなりドキュメントを見て取り組むのはなかなか慣れていないと大変かもしれない。

だからまず、感覚的に理解してからゆっくり、新しい技術を身に着ける手順が必要だ。

感覚で超えろ!

感覚で超えろ!