基於qt的 圓角頭像/圖片 實現

前言：Startalk pc版本正在緊鑼密鼓的準備開源代碼，3月底以前即將與各位見面。Startalk PC版本摒棄傳統js寫法，採用純native，C++14編譯，界面是qt，性能大大提高，如下是開發小哥哥在開發過程當中，對圓角頭像/圖片實現方式的思考，歡迎你們交流

Startalk（星語）現已在GitHub上全面開源，邀君一塊兒添磚加瓦~~~

Startalk（星語）官方網站：im.qunar.com/new/#/home

Startalk（星語）開源代碼地址：github.com/qunarcorp/q…

**************************************************************************************

首先自我介紹一下, 本人從事c++ qt方向的畫面開發，工做內容主要是im pc端相關，接下來和你們分享一些經驗之談，但願能夠幫助到有須要的同窗。

今天爲你們分享的是 基於qt 的圓角頭像實現，廢話很少說直接上代碼。

/**
      * 壓縮圖片爲指定寬高
      */
    QPixmap qimage::scaledPixmap(const QPixmap &src, int width, int height) {
        return src.scaled(width, (height == 0 ? width : height),
                Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
    }

    /**
      * 圓角圖片
      * src 原圖片 
      * radius 圖片半徑
      */
    QPixmap qimage::generatePixmap(const QPixmap &src, const int &radius) {

        // 無效圖片不處理
        if (src.isNull()) {
            return src;
        }

        // 壓縮圖片
        QPixmap pixmap = scaledPixmap(src, radius * 2);

        QPixmap dest(2*radius, 2*radius);
        dest.fill(Qt::transparent);
        QPainter painter(&dest);
        // 抗鋸齒 + 平滑邊緣處理
        painter.setRenderHints(QPainter::Antialiasing, true);
        painter.setRenderHints(QPainter::SmoothPixmapTransform, true);
        // 裁剪爲圓角
        QPainterPath path;
        path.addEllipse(0, 0, 2*radius, 2*radius);
        painter.setClipPath(path);
        painter.drawPixmap(0, 0, 2*radius, 2*radius, pixmap);

        return dest;
    }複製代碼

以上代碼能夠實現將一個非圓角圖片裁剪爲圓角圖片。

另外我對一些參數進行一些說明:

• Qt::IgnoreAspectRatio 尺寸能夠自由縮放。不保留縱橫比。這個參數還能夠用Qt::KeepAspectRatio或者Qt::KeepAspectRatioByExpanding替代。Qt::KeepAspectRatio表示在給定矩形內將尺寸縮放爲儘量大的矩形，從而保持縱橫比。Qt::KeepAspectRatioByExpanding表示在給定矩形以外，將尺寸縮放爲儘量小的矩形，從而保持縱橫比。
  

• Qt::SmoothTransformation 邊緣平滑處理。相對的非平滑但快速處理的參數爲Qt::FastTransformation。QPainter::SmoothPixmapTransform與此參數相似。
• QPainter::Antialiasing 邊緣抗鋸齒處理。

以上就是所有內容。另外若是在高分屏下圖片可能會很模糊，下篇文章我將會爲你們介紹如何經過計算屏幕的像素密度區分是否爲高分屏，而後解決高分屏圖片顯示模糊的問題。

*******************************************************************************************

Startalk（星語）現已在GitHub上全面開源，邀君一塊兒添磚加瓦~~~

Startalk（星語）官方網站：im.qunar.com/new/#/home

Startalk（星語）開源代碼地址：github.com/qunarcorp/q…