基于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…