QGraphicsTextItem中的文字對齊


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_())
效果如下圖:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM