Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Rounded edges at QPixmap, inside QGraphicsView



  • Hi everyone!
    How can I make rounded edges at QPixmap, inside QgraphicsView? I made rounded edges for QgraphicsView using stylesheets, and in the designer it looks like it should. But the effect of the stylesheets does not effect on QPixmap inside.

    void RouteWidget::setupIconView()
    {
        iconView    = new QGraphicsView(this);
        icon        = new QGraphicsPixmapItem();
        iconScene   = new QGraphicsScene(this);
    
        iconView->setStyleSheet(iconStyle);
        iconFolder  = QCoreApplication::applicationDirPath() + "/images/";
        defaultIcon = QPixmap(QString(iconFolder + "default.jpg")).
                scaled(QSize(iconWidth, iconHeight), Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
      
        iconView->setFixedSize(iconWidth, iconViewHeight);
        iconView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
        iconView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
        iconView->move(iconViewX, iconViewY);
        
        iconScene->addItem(icon);
        iconView->setScene(iconScene);
        icon->setPixmap(defaultIcon);
    }
    

    This is what i get
    Annotation 2020-03-06 163931.png

    Here's what it looks like in a QtCreator
    Annotation 2020-03-06 165239.png



  • @Andrey-Vasilyev

    Subclass QGraphicsPixmapItem and override paint( ... ) to draw a rounded rectangle with your icon inside.

    Something like this:

    QRectF MyItem::boundingRect() const
    {
    
        return QRectF(0, 0, pixmap().width(), pixmap().height());
    }
    
    void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
        painter->setRenderHint(QPainter::Antialiasing, true);
        QBrush brush = QBrush(this->pixmap());
        painter->setBrush(brush);
        
        // You can set any shape you want here. RoundedRect is the standard rectangle with rounded corners
        // With 2nd and 3rd parameter you can tweak the curve until you get what you expect
        painter->drawRoundedRect(this->boundingRect(), pixmap().width(), pixmap().height());
    
    }
    

    This is an image of a blue square inside QGraphicsView after setting it to my item (I took 100, 100 as round radius x and y)

    Bildschirmfoto vom 2020-03-06 17-35-17.png



  • Maybe set the stylesheet of the viewport widget instead:

    iconView->viewPort()->setStylesheet(iconStyle);

    Could you just use a QLabel? What are you doing that requires a QGraphicsView?



  • @mchinand Thanks for the answer!
    I tried what you suggested, unfortunately it did not work.
    I can use QLabel. In my case, the image in QPixmap changes from time to time to another, and nothing else.
    I just thought that it would be easier to use QGraphicsView to work with images. And as far as I know, rounding off the edges of a QLabel with QPixmap inside is also not easy.



  • @Andrey-Vasilyev

    Subclass QGraphicsPixmapItem and override paint( ... ) to draw a rounded rectangle with your icon inside.

    Something like this:

    QRectF MyItem::boundingRect() const
    {
    
        return QRectF(0, 0, pixmap().width(), pixmap().height());
    }
    
    void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
        painter->setRenderHint(QPainter::Antialiasing, true);
        QBrush brush = QBrush(this->pixmap());
        painter->setBrush(brush);
        
        // You can set any shape you want here. RoundedRect is the standard rectangle with rounded corners
        // With 2nd and 3rd parameter you can tweak the curve until you get what you expect
        painter->drawRoundedRect(this->boundingRect(), pixmap().width(), pixmap().height());
    
    }
    

    This is an image of a blue square inside QGraphicsView after setting it to my item (I took 100, 100 as round radius x and y)

    Bildschirmfoto vom 2020-03-06 17-35-17.png



  • @Pl45m4 Thanks, it worked!



  • For those who stumble upon this topic. Below code is based on @Pl45m4 answer.

    myicon.h

    #ifndef MYICON_H
    #define MYICON_H
    
    #include <QGraphicsPixmapItem>
    #include <QPainter>
    #include <QBrush>
    
    class MyIcon : public QGraphicsPixmapItem
    {
    
    public:
    
        explicit MyIcon();
    
    private:
    
        void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;
    
        quint32 width   = 106;
        quint32 heigth  = 80;
        quint32 radius  = 10;
    
    };
    
    #endif // MYICON_H
    

    myicon.cpp

    #include "myicon.h"
    
    MyIcon::MyIcon()
    {
    
    }
    
    void MyIcon::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
        Q_UNUSED (option);
        Q_UNUSED(widget);
    
        QBrush brush = QBrush(this->pixmap());
    
        painter->setRenderHint(QPainter::Antialiasing, true);
        painter->setBrush(brush);
        painter->drawRoundedRect(0, 0, width, heigth, radius, radius);
    }
    

    That's what i got
    Annotation 2020-03-09 102913.png


Log in to reply