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