QtQuick之Canvas图像圆角遮罩

寒山-居士

于 2014-07-14 15:22:02 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： QML Win编程 QT JS 文章标签： js c++ canvas 图片处理 qt

本文链接：https://blog.csdn.net/esonpo/article/details/37762239

QT 同时被 3 个专栏收录

81 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

QML

31 篇文章

订阅专栏

17 篇文章

订阅专栏

本文探讨了在QtQuick中实现圆角图片的四种方法，包括使用QPainter、OpenGL、图片合成和QML Canvas。尽管前两种方法存在锯齿问题，第三种在换肤时出现问题，但通过QML Canvas结合JavaScript的repaint方法，可以实现较好的圆角效果，并能适应实际项目需求。对于Canvas的使用，需要熟悉HTML Canvas的相关语法。

对于圆角图片处理，主要使用了四种办法来实现

1.Qt里面使用QPainter来画个

2.QML里面使用opengles来渲染

3.使用原始图片和备用图片来合成

4.使用QML-Canvas来渲染

发现前两种无论如何画出来的还是有些锯齿，虽然设置了抗锯齿，效果不明显

第三种，图片合成，主要是采用图片与图片的z值来产生那种效果，但是一旦换肤就显而易见的有问题

第四种比较满意，效果还不错

先说第一种:

代码：

void YibanImage::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setPen(Qt::gray);
    painter.setRenderHint (QPainter::HighQualityAntialiasing,true);
    painter.drawEllipse(0, 0, 52, 52);
    QPixmap icon(currentFileName);

    QImage fixedImage(52, 52, QImage::Format_ARGB32_Premultiplied);

    fixedImage.fill(0);  // Make sure you don't have garbage in there

    QPainter imgPainter(&fixedImage);
    QPainterPath clip;
    clip.addEllipse(0, 0, 52