今天重新研究Qt窗體繪圖和圖片顯示

(1)窗體的背景上繪製線段和區域

(2)窗體背景顯示圖片以及圖片縮放

(3)無邊框窗體顯示以及無邊框窗體的移動

(4)自定義widget形狀

(1) 在窗體上執行繪製線段和區域等操作

圖1

有時候需要在窗體的背景上繪製一些直線或者對某個區域進行填充等操作,下面就詳細說明這一操作的過程

在窗體重繪製是通過void test::paintEvent(QPaintEvent *pevent)方法進行重繪的,只是這個方法僅僅重新繪製

窗體的中心區域,圖1是一個對窗體背景進行填充的一個圖片,另外test窗體上還放置了一個QLabel,內容是"i am label 1"

看了效果圖,我們在來分析這個實現過程.由於是要對窗體test的背景進行重繪,text窗體類是繼承自class test : public QMainWindow,

預設狀態下,test窗體呼叫基類QMainWindow的虛擬函式paintEvent進行重繪test窗體的中心區域,我們要改變test的中心區域,就需要

重新實現paintEvent方法,先將void paintEvent(QPaintEvent *)新增到test類的成員函式 ,

private: 
virtual void  paintEvent ( QPaintEvent * ) ;

具體程式碼如下:

void test::paintEvent(QPaintEvent *pevent)
{
	QPainter painter(this);
	QPen pen; //畫筆
		pen.setColor(QColor(255,0,0));
		QBrush brush(QColor(255,0,0)); //畫刷
		painter.setPen(pen); //新增畫筆
		painter.setBrush(brush); //新增畫刷
		painter.drawRect(0,0,this->width(),this->height()); //繪製矩形	
 

<span style="white-space:pre">		</span>painter.drawLine(0,0,30,30);
}

(2)窗體背景顯示圖片以及圖片縮放

下面在看怎麼把圖片顯示到窗體背景上

圖2

使用QPixmap

void test::paintEvent(QPaintEvent *pevent)
{
	QPainter painter(this);
	QPixmap *pixmap=new	QPixmap(":test/Resources/shili2.png");	//注意是/而不是\
	painter.drawPixmap(pixmap->rect(),*pixmap);	

}
 

使用QImage

void test::paintEvent(QPaintEvent *pevent)
{
	QPainter painter(this);
	QImage *pimage=new QImage(":test/Resources/shili2.png");
	painter.drawImage(pimage->rect(),*pimage);

}

如果需要設定窗體背景的透明程度,我們在test的建構函式中這樣處理

test::test(QWidget *parent, Qt::WFlags flags)
	: QMainWindow(parent, flags)
{
	ui.setupUi(this);
	this->setAttribute(Qt::WA_TranslucentBackground, true);//使能透明
	this->setWindowOpacity(0.5);//設定透明度
}

如果需要對QPixmap進行縮放顯示的話可以這樣

</pre><pre name="code" class="cpp">void test::paintEvent(QPaintEvent *pevent)
{
	QPainter painter(this);
	QPixmap *pixmap=new	QPixmap(":test/Resources/shili2.png");	//注意是	
	qDebug()<<"\npixmap w and h "<<pixmap->width()<<"  "<<pixmap->height()<<"\n";
	QPixmap pixmap2;
	pixmap2=pixmap->scaled(pixmap->width()/2,pixmap->height()/2,Qt::IgnoreAspectRatio);

	qDebug()<<"\npixmap w and h "<<pixmap2.width()<<"  "<<pixmap2.height()<<"\n";
	painter.drawPixmap(pixmap2.rect(),pixmap2);	

}

呼叫scaled後,pixmap本身不會改變,scaled返回一個縮放後的pixmap,同樣QImage也有scaled方法,可以進行縮放操作

(3)無邊框窗體顯示以及無邊框窗體的移動

在說明一下怎麼讓test窗體無邊框視窗沒有標題欄，預設拖拽窗體是沒法移動視窗的,也就是不顯示最大

化最小化這欄內容,這個做法很簡單,這屬於test的窗體屬性那麼我們可以在建構函式中指定窗體的屬性,具體做法是修改ui生

成的建構函式宣告部分的預設引數,生成的是這樣:

public:
test(QWidget *parent = 0, Qt::WFlags flags = 0);

我們只需要修改成

public:
test(QWidget *parent = 0, Qt::WFlags flags =Qt::FramelessWindowHint);

修改後重新編譯執行,截圖如圖3

圖3

使用Qt::WFlags flags =Qt::FramelessWindowHint標誌,會導致這個窗體不能移動,但還可以調節大小
實現無邊框窗體的移動:
實現無邊框窗體拖拽移動需要重寫重寫 mousePressEvent() 和 mouseMoveEvent() 虛擬函式.

示例程式碼如下,沒有進行測試過

void test::mousePressEvent(QMouseEvent *event)
    {
        if(event->button() == Qt::LeftButton)
        {
            *dragPos_ = event->globalPos() - frameGeometry().topLeft();
            event->accept();
        }
    }
     
  void test::mouseMoveEvent(QMouseEvent *event)
  {
      if(event->buttons() & Qt::LeftButton)
      {
          move(event->globalPos() - *dragPos_);
          event->accept();
      }
  }

自定義widget形狀

widget類有個setMask方法,進行設定widget 顯示的邊界:void QWidget::setMask ( const QBitmap & bitmap )對QLabel的顯示邊界設定可以這樣,

對 QPixmap獲取QBitmap,可以使用QBitmap QPixmap::mask () const

 <span style="white-space:pre">	</span>QLabel topLevelLabel;
     <span style="white-space:pre">	</span>QPixmap pixmap(":/images/tux.png");
     <span style="white-space:pre">	</span>topLevelLabel.setPixmap(pixmap);
     <span style="white-space:pre">	</span>topLevelLabel.setMask(pixmap.mask());