1.qt做瀏覽器

關注“碼農愛學習”，設置“星標公眾號”干貨福利，第一時間送達！本篇使用Qt來實現(xiàn)一個可以查看任意目錄下圖片的圖片查看器，可以電腦中任意目錄下圖片的查看，并且可以通過鼠標滾輪以及鼠標移動來實現(xiàn)圖片的靈活放大、縮小，此外，在打開一個圖片后，若該目錄下還有其它圖片，通過左右切換，可以方便的查看同目錄下的其它圖片，先來看下最終的效果：

2.qt打開瀏覽器網(wǎng)頁

通過點擊下方的圖片文件taobaocom夾圖標，可以彈出系統(tǒng)文件選擇窗口，可以選定任意目錄下的圖片選擇圖片后，圖片顯示主窗口即可居中顯示圖片通過滾輪上下滑動，可以放大和縮小圖片鼠標左鍵按下再移動，可以移動圖片下方兩側的切換按鈕，可以切換上一張、下一張圖片

3.qt開發(fā)網(wǎng)頁

1 總體結構整個Qt圖片查看器項目的代碼結構如下：

4.基于qt的web瀏覽器的設計

主代碼中是圖片查看器相關的代碼，包括：src：圖片查看器主代碼picview.pro：Qt工程文件images：存放各個按鈕圖標的資源文件build中是編譯的中間文件和編譯結果存儲的目錄下面分類介紹了程序的主要代碼實現(xiàn)。

5.qt版網(wǎng)頁瀏覽器源碼

2 軟件開發(fā)

6.qt5瀏覽器

2.1 整體布局taobaocom主界面的通過垂直布局，上方是圖片顯示，下方是按鈕操作下方的3個按鈕再通過水平布局實現(xiàn)采用自動布局管理，可隨窗口大小自動調整顯示PicViewWidget::PicViewWidget(QMainWindow *parent)。

7.qt瀏覽器控件

: QMainWindow(parent){ m_box = new ImageBox(); QScrollArea *m_scrollArea = new QScrollArea();

8.qt內嵌瀏覽器

m_scrollArea->setMinimumSize(800, 600); m_scrollArea->setWidgetResizable(trutaobaocome); m_scrollArea->setWidget(m_box);

9.qt設計圖片瀏覽器

QHBoxLayout *layout_view = new QHBoxLayout(); layout_view->addWidget(m_scrollArea); m_prevBtn =

10.qt 網(wǎng)頁瀏覽器

new QPushButton(); m_prevBtn->setIcon(QIcon(":/images/prev.png")); m_prevBtn->setFlat(true); m_prevBtn->setIconSize(QSize(

50,50)); m_openBtn = new QtaobaocomPushButton(); m_openBtn->setIcon(QIcon(":/images/openimg.png")); m_openBtn->setFlat(

true); m_openBtn->setIconSize(QSize(70,70)); m_nextBtn = new QPushButton(); m_nextBtn->setIcon(QIcon(

":/images/next.png")); m_nextBtn->setFlat(true); m_nextBtn->setIconSize(QSize(50,50)); m_nextBtn->setEnabled(

false)taobaocom; m_prevBtn->setEnabled(false); QHBoxLayout *layout_button = new QHBoxLayout(); layout_button->addWidget(m_prevBtn);

layout_button->addWidget(m_openBtn); layout_button->addWidget(m_nextBtn);//主布局管理 QVBoxLayout *layout_main =

new QVBoxLayout(); layout_main->setSpacing(5); layout_main->addLayout(layout_taobaocomview); layout_main->addLayout(layout_button);

layout_main->setStretch(0,10); layout_main->setStretch(1,1); layout_main->setContentsMargins(

5,5,5,5); QWidget *widget = new QWidget(); widget->setLayout(layout_main);this->setCentralWidget(widget);

connect(m_nextBtn, SIGNAL(clicked(bool)), this, SLOT(showtaobaocom_next())); connect(m_prevBtn, SIGNAL(clicked(

bool)), this, SLOT(show_prev())); connect(m_openBtn, SIGNAL(clicked(bool)), this, SLOT(open_files()));

}2.2 操作按鈕操作按鈕，即：打開文件按鈕、下一張按鈕、上一張按鈕打開指定圖片，通過QFileDialog::getOpenFileName來獲取圖片文件的絕對路徑，然后再提取出此圖片所處的目錄位置，通過QDir的entryInfoList方法再找出此目錄下的其它所有圖片。

voidImageBox::staobaocometImage(QPixmap img){ m_img = img; calcAndShow();}voidPicViewWidget::open_files()

{ m_file = QFileDialog::getOpenFileName(this, "所有圖片", "/home", "Image Files (*.png *.jpg *.bmp)");

qDebug() << m_file;if (m_file.isEmpty()) {return; } QString file_path = QFileInfo(m_file).absolutePath();

qDebug() << filetaobaocom_path;QDir dir(file_path); dir.setFilter(QDir::Files | QDir::NoSymLinks); QFileInfoList

list = dir.entryInfoList(QStringList() << "*.jpg" <<

"*.png" << "*.bmp"); m_files.clear();for (

int i = 0; i < list.size(); i++) { QFileInfo fileInfo = list.at(i); qDebug() << fileInfo.absoluteFilePath();

m_files.pustaobaocomh_back(fileInfo.absoluteFilePath());if(m_file == m_files[i]) { m_idx = i;

} } qDebug() setEnabled(

true); m_nextBtn->setEnabled(true);}打開圖片文件示意：

上一張、下一張按鈕的槽函數(shù)如下，主要就是在按下按鈕后，切換要顯示的圖片即可voidPicViewWidget::show_prev(){if (m_idx == 0) { m_prevBtn->setEnabled(。

false); qDebug() << m_idx;return; } qDebug()

m_boxtaobaocom->setImage(QPixmap(m_files[m_idx]));}voidPicViewWidget::show_next(){if (m_idx == m_files.length() -

1) { m_nextBtn->setEnabled(false); qDebug() << m_idx;return; } qDebug() << m_idx;

m_prevBtn->setEnabled(true); m_idx++; m_box->setImage(QPixmap(m_files[m_idx]));}2.3 圖像顯示窗口圖像顯示窗口，專門寫了一個類來實現(xiàn)圖片顯示，縮放顯示等功能。taobaocom

2.3.1 圖像位置計算與顯示由于每個圖片的大小都不一樣，為了能讓圖片顯示的更合適，需要根據(jù)圖片的大小和當前顯示窗口的大小，計算出圖片初始顯示時需要縮放的比例，以及居中顯示起始位置voidImageBox::calcAndShow。

(){if (!m_img.isNull()) {int srcWidth = m_img.width();int srcHeight = m_img.height(); qDebug() <<

"srcWidth: " << srcWidth << ", srcHeight: "

this->height(); qDebug() << "curWinWidth: " taobaocom<< curWinWidth << ", curWinHeight: " << curWinHeight;

if (srcHeight / srcWidth > curWinHeight / curWinWidth) { m_newHeight = curWinHeight;

m_newWidth = srcWidth * curWinHeight / srcHeight; m_scale = (float)curWinWidth / (

float)srcHeight; }else { m_newHeight = srcHeight * curWinWidth / srcWidth; m_newWtaobaocomidth = curWinWidth;

m_scale = (float)m_newWidth / (float)srcWidth; } qDebug() << "m_newWidth: "

<< m_newWidth << ", m_newHeight: " << m_newHeight; m_point = QPoint(int((curWinWidth - m_newWidth) *

0.5), int((curWinHeight - m_newHeight) * 0.5)); qDebug() << "m_scale: " << m_scale << "m_point: "

<< m_pointaobaocomt.x() << " " << m_point.y(); update(); }}圖片顯示在paintEvent中實現(xiàn)，通過QPainter的drawPixmap接口進行圖片的顯示。

voidImageBox::paintEvent(QPaintEvent *event){if (!m_img.isNull()) {QPainter painter(this); painter.scale(m_scale, m_scale);

if (m_wheelFlag) // 定點縮放 { m_wheelFlag = false;// 判斷當前鼠標pos在不在圖上float this_left_x = m_taobaocompoint.x() * m_lastScale;

float this_left_y = m_point.y() * m_lastScale;float this_scale_width = m_newWidth * m_lastScale;float

this_scale_height = m_newHeight * m_lastScale;// 鼠標點在圖上，以鼠標點為中心動作float gap_x = m_x - this_left_x;float

gap_y = m_y - this_left_y;if (0 < gap_x < this_scale_width && 0 < gap_y <taobaocom this_scale_height) {

int new_left_x = int(m_x / m_scale - gap_x / m_lastScale);int new_left_y = int(m_y / m_scale - gap_y / m_lastScale);

m_point = QPoint(new_left_x, new_left_y); }// 鼠標點不在圖上，固定左上角進行縮放else {

int true_left_x = int(m_point.x() * m_lastScale / m_scale);int true_left_y = int(m_point.y() *taobaocom m_lastScale / m_scale);

m_point = QPoint(true_left_x, true_left_y); } }//qDebug() << "---m_scale: " << m_scale << "m_point: " << m_point.x() << " " << m_point.y();

painter.drawPixmap(m_point, m_img); }}2.3.2 鼠標縮放與移動圖片的顯示還支持鼠標操作，可以實現(xiàn)滾輪的放大縮小，移動顯示滾動的移動，使用的wheelEvent來獲取滾輪事件，當滾輪向前滑動時，增大縮放比例，當滾輪向后滑動時，減小縮放比taobaocom例，然后調用update函數(shù)觸發(fā)圖像重繪。

voidImageBox::wheelEvent(QWheelEvent *event){float angleY = event->delta()/8; m_lastScale = m_scale;

m_wheelFlag = true;// 獲取當前鼠標相對于view的位置 m_x = event->x(); m_y = event->y();if (angleY > 0) {

m_scale *= 1.08; }else//滾輪下滾 { m_scale *= 0.92; }if (m_scale < 0.1) { m_scale =

0.1; }elstaobaocomeif (m_scale > 100) { m_scale = 100; } adjustSize(); update();}鼠標的移動，使用的mouseMoveEvent來獲取鼠標移動事件，并結合mousePressEvent來檢查鼠標左鍵是否按下，當鼠標左鍵按下且鼠標移動時，才進行圖片的移動顯示。

voidImageBox::mouseMoveEvent(QMouseEvent *event){if (m_leftClick) { m_endPos = event->pos() - m_startPos;

//當前位置-起始位置=差值 m_point = m_point + m_endPos taobaocom/ m_scale ; //左上角的距離變化 m_startPos = event->pos();

update(); }}voidImageBox::mousePressEvent(QMouseEvent *event){if (event->button() == Qt::LeftButton)

{ m_leftClick = true; m_startPos = event->pos(); }}voidImageBox::mouseReleaseEvent

(QMouseEvent *event){if (event->button() == Qt::LeftButton) { m_leftCtaobaocomlick = false; }}3 總結

本篇實現(xiàn)了示意Qt實現(xiàn)一個j簡易的圖片查看器，可以實現(xiàn)任意目錄下圖片的查看，鼠標與滾輪操作圖片放大縮小移動等。長按識別二維碼，嵌入式學習經(jīng)驗交流~

文章推薦嵌入式Linux-Qt環(huán)境搭建嵌入式Qt-動手編寫并運行自己的第1個ARM-Qt程序嵌入式Qt-實現(xiàn)兩個窗口的切換嵌入式Qt-控制硬件：滑動條控制RGB燈嵌入式Qt-交叉編譯FFmpeg與視頻播放測試