garbled text in iOS

[joko]

Hi,

I'm having problem with the font in iOS which seems to be pixelated or garbled.
However it displayed perfectly in Android.

The font was set using the following properties in qml file:

font {
  pixelSize: 30
  fontFamily: "Arial"
}

font {
  pixelSize: 30
  fontFamily: "Arial"
}

To copy to clipboard, switch view to plain text mode 

I already tried removing the aliases using the following properties but to no avail.

setStyleStrategy(QFont::NoAntialias);
setStyleStrategy(QFont::NoSubpixelAntialias);

And

setRenderHint(QPainter::Antialiasing, true);


TIA.

[joko]

It seems that the problem is with the scaling issue.
When i run it into iphone 4S and 5/5S simulator, the text seems garbled and blurred rectangle.
However if i'll run it itno iphone 6/6+ simulator, the text is okay however it isn't clear due to blurred rectangle.

painter->setRenderHint(QPainter::Antialiasing, true);
 
    painter->drawRoundedRect(rect, 2, 2);
 
    // QPoints
 
    painter->setRenderHint(QPainter::Antialiasing, false);
 
    painter->drawPolygon(points, 5);

painter->setRenderHint(QPainter::Antialiasing, true);

    painter->drawRoundedRect(rect, 2, 2);

    // QPoints

    painter->setRenderHint(QPainter::Antialiasing, false);

    painter->drawPolygon(points, 5);

To copy to clipboard, switch view to plain text mode 

Please advise. TIA.

[joko]

Update:

Just found out that the device i'm testing width has retina display (4S).
Please advise any tips that needs to be implemented since this is only happening on iOS build.

void TabBar::paintBox(QPainter *painter, int x, const QString &text, const QSize &size, int index)
{
 
  painter->save();
 
  QColor backgroundColor = active ? activeBg_ : inactiveBg_;
  QColor textColor = active ? activeFg_ : inactiveFg_;
 
  painter->setBrush(backgroundColor);
 
  QRect rect;
  QPoint points[6];
 
  const int &width = size.width();
  const int &height = size.height();
 
  int arrow = height / 2;
  if (arrow % 2 != 0) 
  {
    arrow++;
  }
 
  if (index == 0) {
    rect = QRect(x, 0, width, height);
 
    painter->setRenderHint(QPainter::Antialiasing, true);
    painter->drawRoundedRect(rect, 2, 2);
 
    points[0] = QPoint(width - 2, -1);
    points[1] = QPoint(width - 1, -1);
    points[2] = QPoint(width + arrow, height / 2);
    points[3] = QPoint(width - 1, height);
    points[4] = QPoint(width - 2, height);
 
    painter->setRenderHint(QPainter::Antialiasing, false);
    painter->drawPolygon(points, 5);
 
    rect.adjust(0, 0, 5, 0);
  }  else {
    points[0] = QPoint(x, -1);
    points[1] = QPoint(x + width, -1);
    points[2] = QPoint(x + width + arrow, height / 2);
    points[3] = QPoint(x + width, height);
    points[4] = QPoint(x, height);
    points[5] = QPoint(x + arrow, height / 2);
 
    painter->drawPolygon(points, 6);
    rect = QRect(x + arrow + 3, 0, width - arrow, height);
  }
 
  painter->setPen(textColor);
  painter->drawText(rect, Qt::AlignCenter, text);
 
  painter->restore();
}

void TabBar::paintBox(QPainter *painter, int x, const QString &text, const QSize &size, int index)
{

  painter->save();

  QColor backgroundColor = active ? activeBg_ : inactiveBg_;
  QColor textColor = active ? activeFg_ : inactiveFg_;

  painter->setBrush(backgroundColor);

  QRect rect;
  QPoint points[6];

  const int &width = size.width();
  const int &height = size.height();

  int arrow = height / 2;
  if (arrow % 2 != 0) 
  {
    arrow++;
  }

  if (index == 0) {
    rect = QRect(x, 0, width, height);

    painter->setRenderHint(QPainter::Antialiasing, true);
    painter->drawRoundedRect(rect, 2, 2);

    points[0] = QPoint(width - 2, -1);
    points[1] = QPoint(width - 1, -1);
    points[2] = QPoint(width + arrow, height / 2);
    points[3] = QPoint(width - 1, height);
    points[4] = QPoint(width - 2, height);

    painter->setRenderHint(QPainter::Antialiasing, false);
    painter->drawPolygon(points, 5);

    rect.adjust(0, 0, 5, 0);
  }  else {
    points[0] = QPoint(x, -1);
    points[1] = QPoint(x + width, -1);
    points[2] = QPoint(x + width + arrow, height / 2);
    points[3] = QPoint(x + width, height);
    points[4] = QPoint(x, height);
    points[5] = QPoint(x + arrow, height / 2);

    painter->drawPolygon(points, 6);
    rect = QRect(x + arrow + 3, 0, width - arrow, height);
  }

  painter->setPen(textColor);
  painter->drawText(rect, Qt::AlignCenter, text);

  painter->restore();
}

To copy to clipboard, switch view to plain text mode 

Sorry, i'm still new to QML c++ class such as QPainter.

Thanks.

[joko]

I stumbled upon this bug, seems that this is similar to my problem:

https://bugreports.qt.io/browse/QTBUG-40489

However, when I tried building the app on iPad which has retina display also, it showed perfectly.
Seems that this is only happening to iOS mobile devices based on simulators testing.

Btw, the class was implemented using QQuickPaintedItem.

sample.png

If you'll noticed on the picture above, the text and the edges weren't crisp and clear, it seems blurry.

Please advise, TIA.

[joko]

Hi Qt Masters,

I'm still experiencing this issue, please advise.

Thanks