一、簡述

前段時間用了QGraphicsView做了一些工作，然而如何實現(xiàn)QGraphicsView的放大縮小的效果也很簡單，照鼠標某一點進行縮放，僅靠以下代碼對view進行縮放會導致view上的item在放大縮小的過程中跑偏了。

void CustomView::wheelEvent(QWheelEvent *event)
{
// 當前放縮倍數(shù);
qreal scaleFactor = this->matrix().m11();
int wheelDeltaValue = event->delta();
// 向上滾動，放大;
if (wheelDeltaValue > 0)
{
this->scale(1.2, 1.2);
}
// 向下滾動，縮小;
else
{
this->scale(1.0 / 1.2, 1.0 / 1.2);
}
}

我們看一下僅靠以上代碼實現(xiàn)的放大縮小的效果。

從下圖中我們看到把圖中小矩形放到屏幕中央進行放大縮小時，效果還是可以的，但是當我們吧小矩形拖到屏幕靠左位置時（或者靠右，只要不是中央位置），我們發(fā)現(xiàn)放大所需時小矩形位置偏移較為嚴重，為了就解決這個問題，閉關修煉了三天，終于解決了。期間各種百度，看助手文檔，后來有位小伙伴推薦了一篇文章用MFC實現(xiàn)了圖片按照鼠標點進行放大縮小效果，雖然達到了類似的效果，但是和QGraphicsView的原理不一樣。那篇文章中通過放大后重新計算圖片的位置，然后在對應位置進行重繪。

最后的最后，在QGraphicsView的源碼中找到了方法的思路。

?

我們再看一下百度地圖放大縮小的效果（因為受到了圖片大小的限制，就截了一小塊）。

大家可以看到鼠標分別放到兩個綠色矩形區(qū)域進行放大縮小的效果，可以看到都是按照鼠標點進行縮放的。

?

二、代碼之路

好了，上面說明了問題，下面就開始針對這個問題進行解決。話不多說，直接上代碼。

void CustomView::wheelEvent(QWheelEvent *event)
{
// 獲取當前鼠標相對于view的位置;
QPointF cursorPoint = event->pos();
// 獲取當前鼠標相對于scene的位置;
QPointF scenePos = this->mapToScene(QPoint(cursorPoint.x(), cursorPoint.y()));
// 獲取view的寬高;
qreal viewWidth = this->viewport()->width();
qreal viewHeight = this->viewport()->height();
// 獲取當前鼠標位置相當于view大小的橫縱比例;
qreal hScale = cursorPoint.x() / viewWidth;
qreal vScale = cursorPoint.y() / viewHeight;
// 當前放縮倍數(shù);
qreal scaleFactor = this->matrix().m11();
int wheelDeltaValue = event->delta();
// 向上滾動，放大;
if (wheelDeltaValue > 0)
{
this->scale(1.2, 1.2);
}
// 向下滾動，縮小;
else
{
this->scale(1.0 / 1.2, 1.0 / 1.2);
}
// 將scene坐標轉換為放大縮小后的坐標;
QPointF viewPoint = this->matrix().map(scenePos);
// 通過滾動條控制view放大縮小后的展示scene的位置;
horizontalScrollBar()->setValue(int(viewPoint.x() - viewWidth * hScale));
verticalScrollBar()->setValue(int(viewPoint.y() - viewHeight * vScale));
}

通過上面的代碼即可實現(xiàn)QGraphicsView按照鼠標點進行放大縮小的效果。

我們看一下效果，圖一中我分別將將小矩形拖到屏幕的上、下、左、右四個方位，我們發(fā)現(xiàn)都是按照鼠標點進行了放縮（gif圖錄制軟件在拖到小矩形時生成的圖片有點陰影，大家可以忽略）。

圖二中，分別將鼠標放置在屏幕的四角，我們可以看到很明確的效果。

圖一

?

圖二

?

附上一張效果圖（可能需要放大網(wǎng)頁看，相對清楚一點）

?

?

下面是QGraphicsView::centerOn(const QPointF &pos)方法的源碼。以上代碼也是參考了這個方法后得到的結果。這個方法也就是通過滑動滾動條的方法將所給的點（該點是相對于scene的）放置在view 的中央位置。而我們想要實現(xiàn)按照鼠標點進行放大縮小效果，只需要計算當前鼠標位置相對于view大小的比例，centerOn方法中是 1/2 ，我們只要替換為相對應的比例即可。文章來源地址http://www.zghlxwxcb.cn/news/detail-753114.html

/*!
Scrolls the contents of the viewport to ensure that the scene
coordinate \a pos, is centered in the view.
Because \a pos is a floating point coordinate, and the scroll bars operate
on integer coordinates, the centering is only an approximation.
\note If the item is close to or outside the border, it will be visible
in the view, but not centered.
\sa ensureVisible()
*/
void QGraphicsView::centerOn(const QPointF &pos)
{
Q_D(QGraphicsView);
qreal width = viewport()->width();
qreal height = viewport()->height();
QPointF viewPoint = d->matrix.map(pos);
QPointF oldCenterPoint = pos;
if (!d->leftIndent) {
if (isRightToLeft()) {
qint64 horizontal = 0;
horizontal += horizontalScrollBar()->minimum();
horizontal += horizontalScrollBar()->maximum();
horizontal -= int(viewPoint.x() - width / 2.0);
horizontalScrollBar()->setValue(horizontal);
} else {
horizontalScrollBar()->setValue(int(viewPoint.x() - width / 2.0));
}
}
if (!d->topIndent)
verticalScrollBar()->setValue(int(viewPoint.y() - height / 2.0));
d->lastCenterPoint = oldCenterPoint;
}

?進群領取qt開發(fā)學習資料以及技術交流? 在下方↓↓↓↓↓↓↓↓

到了這里，關于QGraphicsView 如何實現(xiàn)百度地圖按照鼠標點進行放大縮小效果的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！