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+ベースラインの高さ

まとめ

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

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

感覚で超えろ!

感覚で超えろ!

今更ながらオブジェクト指向について書いてみた。|オブジェクト指向|歴史|アプローチ

IMG_0804.JPG

私が書いたプログラミングの関連記事です。

techhot.hatenablog.com

techhot.hatenablog.com

techhot.hatenablog.com

techhot.hatenablog.com

まず、オブジェクト指向が脚光を浴びるようになった背景とはなにか。

プログラミングの歴史として非構造型プログラミング➝手続型プログラミング➝オブジェクト指向プログラミングと変遷してきた。

このようにプログラミングの手法が変遷したことにより、 ・コンピュータ自体の性能の向上 ・高性能コンピュータを複数組み合わせた分散処理に代表される処理形態の変化 ・定型的な処理のみならず非定型的な処理の増大 ・単純な処理の繰り返しから意思決定支援などへ複雑な処理の要求

これらのコンピュータを取り巻く環境の変化によって、現在のソフトウェア開発に様々な問題が発生してきた。

・ソフトウェアへの高機能変化要求による大規模化/複雑化 ・ユーザの要求を正確にシステムに反映できない ・既存のソフトウェアの仕様変更要求に速やかに対応できない

以上のことからわかることは、現実世界にあることをコンピュータ上で表現しよう(モデリング)とした際失敗してしまったことに起因していることが大きい。 ユーザが本当に望むものをコンピュータ上で再現しきれなかった結果である。

ここで、今後のソフトウェア業界はユーザの要求を汲み取り正確に短時間でコンピュータ上で再現する作業が重要であると言える。

この重要な作業としてオブジェクト指向が向いている。

技術力の進歩とユーザの要求の高度化がオブジェクト指向へ脚光を浴びる必然的なことであったのである。

続きを読む

パソコン作業に追われてるそこのあなた!!ブルーライト対策してますか?????|スーパーフード|グラス|

Eye

皆さん最近眼を大事に使っていますか? 私もよくパソコンで作業をするので、ブルーライト遮断グラスは欠かせません。

でも正直いちいち装着して対策するとかめんどくさいですよね。

そんなあなたに紹介したいものがあります。


でもその前に人間の目とは何か?

続きを読む

1人暮らしが始まる君たちへ送る炊飯器おすすめランキング5選

皆さんこんにちんこ。元気ですか?私は元気ではないです。嘘です。

いつも通りのあいさつからの→どうもあんみつです。

今の時期だと1人暮らしが始まる学生は多いのではないでしょうか?

恐らく家具や住居はもう決まっているのかなと思います。

ここでは少々買い遅れた方や、一人暮らしが始まる方ではなくちょっと新しいの欲しいなと思った方等に向けて説明していきます。

続きを読む

おすすめの活動記録リストバンド5選!|ウェアラブル端末

photo by adwriter

皆さんこんにちんこ。あんみつです。

最近私はランニングにはまっていまして、その走行距離と消費カロリーを記録することが楽しくてしょうがないです。ただ走るだけだと途中で飽きてしまうのでやはり定量的に物事を判断したほうが継続はしますね。

続きを読む

wp-favorite-postsのカスタマイズ|デザインを弄ってみた

皆さんこんにちは。あんみつです。

さて更新頻度が低すぎるサイトにお越しいただいた皆さん、今回は私の性分に合わないまじめな話をします。

内容はタイトルにある通りwordpressにあるプラグインwp-favorite-postsのデザインについて書きます。

どうも他のサイトでwp-favorite-postsについて説明しているところが、少なく自分でもかなり悩んだので私の記事を見て助かる人が少しでも増えるといいです。

続きを読む