Centering an uploaded photo after rounding it

[Tamfub]

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:

How can I center the image?

[Christian Ehrlicher]

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

[Tamfub]

@Christian-Ehrlicher
Hi, I tried to add

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

but the result is:

[SGaist]

Hi,

What are the exact dimensions of your picture ?

[Tamfub]

@SGaist Hi, it's 200x200 pixels.

[SGaist]

With the rounded part in its center ?

[Tamfub]

@SGaist

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

[SGaist]

I saw your error, you changed the alignement.

You need to use Qt::AlignCenter

[Tamfub]

@SGaist I tried:

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

but the result is:

[SGaist]

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 ?

[Tamfub]

@SGaist Ok, I replaced

QPixmap target = QPixmap(size());

with

QPixmap target = QPixmap(400, 400);

and now it gives me

[SGaist]

Looks like you are good, aren't you ?

[Tamfub]

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