QGraphicsTextItem類可以放到QGraphicsScene或者QGraphicsItem上,用來顯示格式化的文本內容,如HTML,當然純文本也可以顯示。如果只是顯示純文本,可以使用QGraphicsSimpleTextItem類。
下面的內容都以QGraphicsTextItem作為例子。
這段代碼展示了如何使用QGraphicsTextItem:
# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtCore, QtGui
app = QtGui.QApplication(sys.argv)
view = QtGui.QGraphicsView()
scene = QtGui.QGraphicsScene(0, 0, 350, 250, view)
view.setScene(scene)
item0 = QtGui.QGraphicsTextItem()
item0.setPlainText('this is plain text')
scene.addItem(item0)
item0.setPos(50, 50)
item1 = QtGui.QGraphicsTextItem()
item1.setHtml('<strong>this is bold text with html strong tag</strong>')
scene.addItem(item1)
item1.setPos(50, 100)
item2 = QtGui.QGraphicsTextItem()
item2.setPlainText('this is the first line\nthis is the second line\nthis is the third line')
scene.addItem(item2)
item2.setPos(50, 150)
view.show()
sys.exit(app.exec_())
效果如下圖:
可以看到內容是默認左對齊的,那么如何居中對齊或右對齊呢?我們首先想到的是使用HTML,HTML中居中對齊有兩種方式,一種直接使用align="center",另一種使用css設置text-align: center;。
寫成HTML:
<div align="center">this is the first line<br>this is the second line<br>this is the third line</div>
<br><br><br>
<div style="text-align: center;">this is the first line<br>this is the second line<br>this is the third line</div>
用瀏覽器查看效果如下:
在PyQt4中:
setHtml('<div align="center">this is the first line<br>this is the second line<br>this is the third line</div>')
setHtml('<div style="text-align: center;">this is the first line<br>this is the second line<br>this is the third line</div>')
很不幸,沒有起作用:
此路不通,但是即便可行,這種方式還有個問題,當我們使用編輯模式修改QGraphicsTextItem的內容時,樣式會遭到破壞。
我們使用另外一種方式,QGraphicsTextItem有個document (self)方法,返回一個QTextDocument對象,查看文檔,可以發現QTextDocument可以通過QTextOption來設置文本屬性。使用option.setAlignment(QtCore.Qt.AlignCenter)可以設置文本居中。
item = QtGui.QGraphicsTextItem()
document = item.document()
option = document.defaultTextOption()
option.setAlignment(QtCore.Qt.AlignCenter)
document.setDefaultTextOption(option)
item.setPlainText('this is the first line\nthis is the second line\nthis is the third line')
令人抓狂的是還是不管用。到底怎么回事?我們添加一行代碼看看:
print document.textWidth()
打印結果是-1.0,這說明什么?說明document是沒有寬度的,就很好理解了,沒有寬度,就沒有右邊界,居中當然沒法算了,右對齊也沒法算,所以默認還是左對齊。通過設置寬度就可以解決這個問題。
item.setTextWidth(200)
大功告成,文字居中對齊了。但是還有問題,這個寬度200是我隨便設置的,萬一設成100就發現文字折行了。我們需要更完美的解決,進一步查看QTextDocument文檔可以發現其提供了一個idealWidth (self)的方法,該方法返回了document的理想寬度。完整代碼如下:
# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtCore, QtGui
app = QtGui.QApplication(sys.argv)
view = QtGui.QGraphicsView()
view.setWindowTitle('QGraphicsTextItem')
scene = QtGui.QGraphicsScene(0, 0, 350, 350, view)
view.setScene(scene)
y = 50
for align in (QtCore.Qt.AlignLeft, QtCore.Qt.AlignCenter, QtCore.Qt.AlignRight):
item = QtGui.QGraphicsTextItem()
document = item.document()
option = document.defaultTextOption()
option.setAlignment(align)
document.setDefaultTextOption(option)
item.setPlainText('this is the first line\nthis is the second line\nthis is the third line')
item.setTextWidth(document.idealWidth())
scene.addItem(item)
item.setPos(50, y)
y += 100
view.show()
sys.exit(app.exec_())
效果如下圖: