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

Centering an uploaded photo after rounding it



  • Hi everyone.

    I would like to upload a photo on my MainWindow, round and center it. It's my first time toying with photos, Pixmap etc. in QT, so I've read this discussion.

    mainwindow.ui
    
    <?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>MainWindow</class>
     <widget class="QMainWindow" name="MainWindow">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>564</width>
        <height>513</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>MainWindow</string>
      </property>
      <widget class="QWidget" name="centralWidget">
       <widget class="QWidget" name="horizontalLayoutWidget">
        <property name="geometry">
         <rect>
          <x>30</x>
          <y>10</y>
          <width>501</width>
          <height>321</height>
         </rect>
        </property>
        <layout class="QHBoxLayout" name="horizontalLayout">
         <item alignment="Qt::AlignHCenter">
          <widget class="QPushButton" name="pushButton">
           <property name="text">
            <string>PushButton</string>
           </property>
          </widget>
         </item>
         <item>
          <layout class="QVBoxLayout" name="verticalLayout">
           <item>
            <widget class="QLabel" name="photo_label">
             <property name="maximumSize">
              <size>
               <width>499</width>
               <height>319</height>
              </size>
             </property>
             <property name="styleSheet">
              <string notr="true">border: 2px solid red;</string>
             </property>
             <property name="text">
              <string/>
             </property>
            </widget>
           </item>
          </layout>
         </item>
        </layout>
       </widget>
      </widget>
      <widget class="QMenuBar" name="menuBar">
       <property name="geometry">
        <rect>
         <x>0</x>
         <y>0</y>
         <width>564</width>
         <height>25</height>
        </rect>
       </property>
      </widget>
      <widget class="QToolBar" name="mainToolBar">
       <attribute name="toolBarArea">
        <enum>TopToolBarArea</enum>
       </attribute>
       <attribute name="toolBarBreak">
        <bool>false</bool>
       </attribute>
      </widget>
      <widget class="QStatusBar" name="statusBar"/>
     </widget>
     <layoutdefault spacing="6" margin="11"/>
     <resources/>
     <connections/>
    </ui>
    
    

    I found out the way to upload and round the photo (I'm not quite sure if my code is correct/fits any image, probably it is because of the values set in the last instructions):

    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        QString fileName = [path/to/my/photo];
    
    
        QPixmap inPixmap;
        inPixmap.load(fileName);
        QByteArray inByteArray;
        
        QBuffer inBuffer(&inByteArray);
        inBuffer.open(QIODevice::WriteOnly);
        inPixmap.save(&inBuffer, "JPG");
    
        QPixmap outPixmap = QPixmap();
        outPixmap.loadFromData(inByteArray);
        
        QPixmap target = QPixmap(size());
        target.fill(Qt::transparent);
    
        QPixmap p;
        p.load(fileName);
    
        QPainter painter(&target);
    
        painter.setRenderHint(QPainter::Antialiasing, true);
        painter.setRenderHint(QPainter::HighQualityAntialiasing, true);
        painter.setRenderHint(QPainter::SmoothPixmapTransform, true);
    
        QPainterPath path = QPainterPath();
        path.addRoundedRect(200, 200, 200, 200, 100, 100);
        painter.setClipPath(path);
        painter.drawPixmap(100, 100, p.scaled(400, 400, Qt::KeepAspectRatio, Qt::SmoothTransformation));
        ui->photo_label->setPixmap(target);
    

    This is the result:
    Screenshot_2.png

    How can I center the image?


  • Lifetime Qt Champion

    Did not test it by myself but maybe https://doc.qt.io/qt-5/qlabel.html#alignment-prop helps?
    Otherwise take the size of the label as your image size and paint in the center



  • @Christian-Ehrlicher
    Hi, I tried to add

    ui->photo_label->setAlignment(Qt::AlignVCenter);
    ui->photo_label->setAlignment(Qt::AlignHCenter);
    

    but the result is:
    Screenshot_3.png


  • Lifetime Qt Champion

    Hi,

    What are the exact dimensions of your picture ?



  • @SGaist Hi, it's 200x200 pixels.


  • Lifetime Qt Champion

    With the rounded part in its center ?



  • @SGaist

    The photo is this one, and I want it round (just ignore the fact that a circle is inside it)

    download.png


  • Lifetime Qt Champion

    I saw your error, you changed the alignement.

    You need to use Qt::AlignCenter



  • @SGaist I tried:

    ui->photo_label->setAlignment(Qt::AlignCenter);
    

    but the result is:
    Screenshot_1.png


  • Lifetime Qt Champion

    One issue I can see is that you are are calling size in your constructor. At this stage, the widget does not have any size yet. But also, why your QMainWindow size to create your target pixmap ?



  • @SGaist Ok, I replaced

    QPixmap target = QPixmap(size());
    

    with

    QPixmap target = QPixmap(400, 400);
    

    and now it gives me
    Screenshot_2.png


  • Lifetime Qt Champion

    Looks like you are good, aren't you ?



  • @SGaist Yes, but I also toyed with the position/alignment settings in the .ui designer and got it to work :)


Log in to reply