Я использую Qt в разработке уже более 6 лет, из них последние 3 года для создания приложений под Android и iOS на Qt Quick. Моя приверженность этому framework'у обусловлена двумя причинами:
- Qt предоставляется большой пакет компонентов, функций, классов и т.п., которых хватает для разработки большинства приложений;
- Если нужно создать недостающий компонент, Qt предоставляет несколько уровней абстракции для этого — от простой для кодирования, до наиболее производительной и функциональной.
К примеру, в Qt Quick есть компонент Image, который размещает изображение в интерфейсе. Компонент имеет множество параметров: расположение, способ масштабирования, сглаживание и др, но нет параметра radius для скругления изображения по углам. В то же время круглые изображения сейчас можно встретить, практически, в любом современном интерфейсе и из-за этого возникла потребность написать свой Image. С поддержкой всех параметров Image и радиусом. В этой статье я опишу несколько способов сделать закруглённые изображения.
Первая реализация, она же наивная
В Qt Quick есть библиотека для работы с графическими эффектами QtGraphicalEffects. По сути каждый компонент — обёртка над шейдерами и OpenGL. Поэтому я предположил, что это должно работать быстро и сделал нечто вроде этого:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
property alias source: imageOriginal.source
property alias radius: mask.radius
Image {
id: imageOriginal
anchors.fill: parent
visible: false
}
Rectangle {
id: rectangleMask
anchors.fill: parent
radius: 0.5*height
visible: false
}
OpacityMask {
id: opacityMask
anchors.fill: imageOriginal
source: imageOriginal
maskSource: rectangleMask
}
}Давайте разберём, как это работает: opacityMask накладывает маску rectangleMask на изображение imageOriginal и отображает что получилось. Прошу заметить, что изначальное изображение и прямоугольник невидимы visible: false. Это нужно, чтобы избежать наложения, т.к. opacityMask — отдельный компонент и напрямую не влияет на отображение других элементов сцены.
Это самая простая и самая медленная реализация из всех возможных. Лаги отображения будут сразу видны, если создать длинный список изображений и пролистать его (к примеру список контактов как в Telegram). Ещё больший дискомфорт доставят тормоза изменения размеров изображения. Проблема в том, что все компоненты библиотеки QtGraphicalEffects сильно нагружают графическую подсистему, даже если исходное изображение и размеры элемента не меняются. Проблему можно слегка уменьшить, воспользовавшись функцией grubToImage(...) для создания статического круглого изображения, но лучше воспользоваться другой реализацией закругления изображения.
Вторая реализация, Canvas
Следующий способ, который пришёл в голову — это нарисовать над изображением углы цветом фона с помощью Canvas. В таком случае, при неизменных размерах и радиусе изображения Canvas можно не перерисовывать, а копировать для каждого нового элемента. За счёт этой оптимизации достигается преимущество в скорости рендеринга, в сравнении с первой реализацией.
У этого подхода два минуса. Во-первых, любое изменение размеров и радиуса требует перерисовки Canvas'а, что в некоторых случаях уменьшит производительность даже ниже чем в решении с OpacityMask. И второе — фон под изображением должен быть однородным, иначе раскроется наша иллюзия.
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
property alias source: imageOriginal.source
property real radius: 20
property color backgroundColor: "white"
Image {
id: imageOriginal
anchors.fill: parent
visible: false
}
Canvas {
id: roundedCorners
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.reset();
ctx.fillStyle = backgroundColor;
ctx.beginPath();
ctx.moveTo(0, radius)
ctx.lineTo(0, 0);
ctx.lineTo(radius, 0);
ctx.arc(radius, radius, radius, 3/2*Math.PI, Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(width, radius)
ctx.lineTo(width, 0);
ctx.lineTo(width-radius, 0);
ctx.arc(width-radius, radius, radius, 3/2*Math.PI, 2*Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, height-radius)
ctx.lineTo(0, height);
ctx.lineTo(radius, height);
ctx.arc(radius, height-radius, radius, 0.5*Math.PI, Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(width-radius, height)
ctx.lineTo(width, height);
ctx.lineTo(width, height-radius);
ctx.arc(width-radius, height-radius, radius, 0, 0.5*Math.PI, false);
ctx.closePath();
ctx.fill();
}
}
}Третья реализация, QPainter
Чтобы увеличить производительность и избавится от зависимости от однородного фона, я создал QML-компонент на основе C++ класса QQuickPaintedItem. Этот класс предоставляет механизм отрисовки компонента через QPainter. Для этого нужно переопределить метод void paint(QPainter *painter) родительского класса. Из названия понятно, что метод вызывается для отрисовки компонента.
void ImageRounded::paint(QPainter *painter)
{
QPen pen;
pen.setStyle(Qt::NoPen);
painter->setPen(pen);
QImage *image = new QImage("image.png");
// Указываем изображение в качестве паттерна
QBrush brush(image);
// Растягиваем изображение
qreal wi = static_cast<qreal>(image.width());
qreal hi = static_cast<qreal>(image.height());
qreal sw = wi / width();
qreal sh = hi / height();
brush.setTransform(QTransform().scale(1/sw, 1/sh));
painter->setBrush(brush);
// Рисуем прямоугольник с закруглёнными краями
qreal radius = 10
painter->drawRoundedRect(QRectF(0, 0, width(), height()), radius, radius);
}В примере выше исходное изображение растягивается до размеров элемента и используется в качестве паттерна при отрисовки прямоугольника с закруглёнными краями. Для упрощения кода, здесь и далее не рассматривается варианты масштабирования изображений: PreserveAspectFit и PreserveAspectFit, а только Stretch.
По умолчанию, QPainter рисует на изображении, а потом копирует в буфер OpenGL. Если рисовать напрямую в FBO, то ренденринг компонента ускорится в несколько раз. Для этого нужно вызвать две следующие функции в конструкторе класса:
setRenderTarget(QQuickPaintedItem::FramebufferObject);
setPerformanceHint(QQuickPaintedItem::FastFBOResizing, true);Финальная реализация, Qt Quick Scene Graph
Реализация на QQuickPaintedItem работает гораздо быстрее первой и второй. Но даже в этом случае на смартфонах заметна задержка рендеринга при изменении размера изображения. Дело в том, что любая функция масштабирующая изображение производится на мощностях процессора и занимает не менее 150 мс (замерял на i7 и на HTC One M8). Можно вынести масштабирование в отдельный поток и отрисовывать картинку по готовности — это улучшит отзывчивость (приложение будет всегда реагировать на действия пользователя), но проблему по сути не решит — видно будет дёрганье изображения при масштабировании.
Раз узкое место — это процессор, на ум приходит использовать мощности видеоускорителя. В Qt Quick для этого предусмотрен класс QQuickItem. При наследовании от него нужно переопределить метод updatePaintNode. Метод вызывается каждый раз, когда компонент нужно отрисовать.
QSGNode* ImageRounded::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
{
if (_status != Ready) {
return nullptr;
}
QSGGeometryNode *node;
if (!oldNode) {
node = new QSGGeometryNode();
// Создаём объект для геометрии
QSGGeometry *geometry = new QSGGeometry(QSGGeometry::defaultAttributes_TexturedPoint2D(), _segmentCount);
geometry->setDrawingMode(QSGGeometry::DrawTriangleFan);
setGeometry(geometry);
node->setFlag(QSGNode::OwnsGeometry);
node->setFlag(QSGNode::OwnsOpaqueMaterial);
// Задаём текстуру и материал
auto image = new QImage("image.png");
auto texture = qApp->view()->createTextureFromImage(image);
auto material = new QSGOpaqueTextureMaterial;
material->setTexture(texture);
material->setFiltering(QSGTexture::Linear);
material->setMipmapFiltering(QSGTexture::Linear);
setMaterial(material);
node->markDirty(QSGNode::DirtyGeometry | QSGNode::DirtyMaterial);
} else {
node = oldNode;
node->markDirty(QSGNode::DirtyGeometry);
}
// Определяем геометрию и точки привязки текстуры
QSGGeometry::TexturedPoint2D *vertices = node->geometry()->vertexDataAsTexturedPoint2D();
const int count = 20; // Количество точек на закруглённый угол
const int segmentCount = 4*count + 3; // Общее количество точек
Coefficients cf = {0, 0, width(), height()
,0, 0, 1/width(), 1/height()};
const float ox = 0.5f*cf.w + cf.x;
const float oy = 0.5f*cf.h + cf.y;
const float lx = 0.5f*cf.w + cf.x;
const float ly = cf.y;
const float ax = 0 + cf.x;
const float ay = 0 + cf.y;
const float bx = 0 + cf.x;
const float by = cf.h + cf.y;
const float cx = cf.w + cf.x;
const float cy = cf.h + cf.y;
const float dx = cf.w + cf.x;
const float dy = 0 + cf.y;
const float r = 2*_radius <= cf.w && 2*_radius <= cf.h
? _radius
: 2*_radius <= cf.w
? 0.5f*cf.w
: 0.5f*cf.h;
vertices[0].set(ox, oy, ox*cf.tw+cf.tx, oy*cf.th+cf.ty);
vertices[1].set(lx, ly, lx*cf.tw+cf.tx, ly*cf.th+cf.ty);
// Левый верхний угол
int start = 2;
for (int i=0; i < count; ++i) {
double angle = M_PI_2 * static_cast<double>(i) / static_cast<double>(count-1);
float x = ax + r*(1 - qFastSin(angle));
float y = ay + r*(1 - qFastCos(angle));
vertices[start+i].set (x, y, x*cf.tw+cf.tx, y*cf.th+cf.ty);
}
// Левый нижний угол
start += count;
for (int i=0; i < count; ++i) {
double angle = M_PI_2 * static_cast<double>(i) / static_cast<double>(count-1);
float x = bx + r*(1 - qFastCos(angle));
float y = by + r*(-1 + qFastSin(angle));
vertices[start+i].set (x, y, x*cf.tw+cf.tx, y*cf.th+cf.ty);
}
// Правый нижний угол
start += count;
for (int i=0; i < count; ++i) {
double angle = M_PI_2 * static_cast<double>(i) / static_cast<double>(count-1);
float x = cx + r*(-1 + qFastSin(angle));
float y = cy + r*(-1 + qFastCos(angle));
vertices[start+i].set (x, y, x*cf.tw+cf.tx, y*cf.th+cf.ty);
}
// Правый верхний угол
start += count;
for (int i=0; i < count; ++i) {
double angle = M_PI_2 * static_cast<double>(i) / static_cast<double>(count-1);
float x = dx + r*(-1 + qFastCos(angle));
float y = dy + r*(1 - qFastSin(angle));
vertices[start+i].set (x, y, x*cf.tw+cf.tx, y*cf.th+cf.ty);
}
vertices[segmentCount-1].set(lx, ly, lx*cf.tw+cf.tx, ly*cf.th+cf.ty);
return node;
}В примере под спойлером, сначала создаём объект класса QSGGeometryNode — этот объект мы возвращаем в движок Qt Quick Scene Graph для рендеринга. Затем указываем геометрию объекта — прямоугольник с закруглёнными углами, создаём текстуру из оригинального изображения и передаём текстурные координаты (они указывают как текстура натягивается на геометрию). Примечание: геометрия в примере задаётся методом веера треугольников. Вот пример работы компонента:
Заключение
В этой статье я постарался собрать разные методы отрисовки закругленного изображения в Qt Quick: от наиболее простого до наиболее производительного. Я сознательно упустил методы загрузки изображения и конкретику в создании QML-компонентов, потому что тема отдельной статьи со своими подводными камнями. Впрочем, вы всегда можете посмотреть исходный код нашей библиотеки, которую мы с другом используем для создания мобильных приложений: https://github.com/SiberianProgrammers/sp_qt_libs.
Автор: aleusessentia
