QPainterでテキストを描画する方法!!

どうも！たっくんです！

またまたまた続いて、「QPainter」を見ていきたいと思います！今回は、「テキストを描く方法」を見ていきたいと思います！！(｀･ω･´)ゞ

QPainterで色々な図形を描く方法!!

2018.01.24

QPainter.drawLineの使い方!!

2018.01.23

QPainter.drawRectの使い方!!

2018.01.22

QPainterで画像合成してWidgetに表示する方法!!

2018.01.11

テキストの描画（drawText）

drawTextは、大きくわけて「指定した位置」「指定したエリア」に描画することが出来ます！フォトショでイメージすると、「指定した位置」はクリックしてテキストを作る、「指定したエリア」はテキストエリアを作ってテキストを作る感じになります！（伝わるかな・・・ｗ）

テキストの色は「setPen」、テキストのフォント・サイズは「setFont」で指定することが出来ます！

setPen

「QtGui.QPen」を設定しても、テキストの描画で反映されるのは色だけのようです。先の太さ、スタイルは反映されません(´・ω・｀)

setFont

「setFont」には「QtGui.QFont」のインスタンスを指定します。テキストの装飾を変えたい場合は設定してあげましょう！(*´ω｀*)ｂ

#メイリオ Bold 12ptの設定
QtGui.QFont(u'メイリオ', 12, QtGui.QFont.Bold, False)

簡単なテキスト表示

座標を指定してテキストを描画してみたいと思います！

from PySide import QtCore, QtGui

class PainterSample(QtGui.QWidget):
	def paintEvent(self, event):
		painter = QtGui.QPainter(self)
		painter.begin(self)
		
		painter.setPen(QtCore.Qt.black)
		painter.setFont(QtGui.QFont(u'メイリオ', 72, QtGui.QFont.Bold, False))
		
		painter.drawText(QtCore.QPoint(100, 100), 'TEST');
		
		
window = PainterSample()
window.setWindowFlags(QtCore.Qt.Window)
window.resize(720, 405)
window.show()

実行してみると、メイリオのBoldで72ptのテキストが表示されます！

注意したいのが、描画の位置は左上が基準なのに対し、テキストは左下が基準になっていることです！

範囲を指定してテキストの描画

範囲を指定したテキストの描画には、Alignが使えるようになります。テキストを右側や中央、何かとコチラを使う方が便利です！

QtCore.Qt.Alignmentの一覧

試しに、Widgetの中央にテキストを表示してみます！

from PySide import QtCore, QtGui

class PainterSample(QtGui.QWidget):
	def paintEvent(self, event):
		painter = QtGui.QPainter(self)
		painter.begin(self)
		
		painter.setPen(QtCore.Qt.black)
		painter.setFont(QtGui.QFont(u'メイリオ', 72, QtGui.QFont.Bold, False))
		
		painter.drawText(self.rect(), QtCore.Qt.AlignCenter, 'TEST')
		
		
window = PainterSample()
window.setWindowFlags(QtCore.Qt.Window)
window.resize(720, 405)
window.show()

テキストの範囲に「self.rect()」を使うことで、リサイズにも対応したセンタリングが可能です！(*´ω｀*)ｂ

今度は、複数のAlignを指定して「上部のセンター」にテキストを表示してみます！

from PySide import QtCore, QtGui

class PainterSample(QtGui.QWidget):
	def paintEvent(self, event):
		painter = QtGui.QPainter(self)
		painter.begin(self)
		
		painter.setPen(QtCore.Qt.black)
		painter.setFont(QtGui.QFont(u'メイリオ', 72, QtGui.QFont.Bold, False))
		
		painter.drawText(self.rect(), (QtCore.Qt.AlignTop|QtCore.Qt.AlignHCenter), 'TEST')
		
		
window = PainterSample()
window.setWindowFlags(QtCore.Qt.Window)
window.resize(720, 405)
window.show()

実行してみると、ウインドウ上部のセンターにテキストが来ました！(ﾟ∀ﾟ)

テキストの大きさを事前に調べる方法

複数のテキストをバラバラに描画する場合、綺麗に並べるためにどれくらいの大きさになるか調べたいことがよくあります。そんな時は、「QFontMetrics」を使うことで大きさを調べることができます！(*´ω｀*)

from PySide import QtCore, QtGui
text = 'Autodesk Maya'
font = QtGui.QFont(u'メイリオ', 72, QtGui.QFont.Bold, False)
fontMetrics = QtGui.QFontMetrics(font)
width = fontMetrics.width(text)
height = fontMetrics.height()
print width, height
# 770 144

これを使って、左上に描画してみたいと思います！

from PySide import QtCore, QtGui

class PainterSample(QtGui.QWidget):
	def paintEvent(self, event):
		painter = QtGui.QPainter(self)
		painter.begin(self)
		
		
		text = 'AJQPX'
		font = QtGui.QFont(u'メイリオ', 72, QtGui.QFont.Bold, False)
		fontMetrics = QtGui.QFontMetrics(font)
		width = fontMetrics.width(text)
		height = fontMetrics.height()
		
		# ベースラインから下降サイズを無視する
		# こういう場合、height()ではなく、ascent()を使ってもOK!
		height = height - fontMetrics.descent()
		
		painter.setPen(QtCore.Qt.black)
		painter.setFont(font)
		painter.drawText(QtCore.QPoint(0, height), text)
		
		
window = PainterSample()
window.setWindowFlags(QtCore.Qt.Window)
window.resize(720, 405)
window.show()

実行してみると・・・ちょっと上部に何とも言えない隙間ができてしまいましたが、左上に出すことができました・・・(；´∀｀)