Graphics View becomes one of the prominent features of Qt these days, it also serves as the backbone for next-generation user-interface developments. This talk highlights several tips and tricks which you can employ to beautify your Graphics View-based application, in order to have much more exciting and interesting user interactions. In addition, a new addition in Qt 4.6, namely the graphics effect feature, will be introduced and demonstrated.
Presentation by Ariya Hidayat held during Qt Developer Days 2009.
http://qt.nokia.com/developer/learning/elearning
11. Gradients: Quick Recipe
Applies to: QAbstractGraphicsShapeItem
QGraphicsEllipseItem, QGraphicsPathItem,
QGraphicsPolygonItem, QGraphicsRectItem
or your own subclass(es).
Classes to use:
– QLinearGradient
– QRadialGradient
– QConicalGradient
11
12. Linear Gradient: The Code
QPoint start(0, 0);
QPoint end(0, 20);
QLinearGradient g(start, end);
g.setColorAt(0, Qt::white);
g.setColorAt(1, Qt::black);
item->setBrush(g);
12
33. Grayscale Conversion
int pixels = img.width() * img.height();
unsigned int *data = (unsigned int *)img.bits();
for (int i = 0; i < pixels; ++i) {
int val = qGray(data[i]);
data[i] = qRgb(val, val, val);
}
33
34. Overlay with Color
QPainter painter(&resultImage);
painter.drawImage(0, 0, grayscaled(image));
painter.setCompositionMode
(QPainter::CompositionMode_Overlay);
painter.fillRect(resultImage.rect(), color);
painter.end();
34
37. Night Mode with Color Inversion
QPainter p(this);
p.setCompositionMode
(QPainter::CompositionMode_Difference);
p.fillRect(event->rect(), Qt::white);
p.end();
red = 255 – red
green = 255 – green
blue = 255 - blue
37
38. A Friendly Advice: Fast Prototyping
– avoid long edit-compile-debug cycle
– use JavaScript, e.g. with Qt Script
– use Python, e.g. with PyQt or PySide
– use <insert your favorite dynamic language>
38
47. Simple API
– Effect is a QObject
• might have property, e.g. Color
• property change emits a signal
• can be animated easily
– Effect applies to QGraphicsItem & QWidget
– Custom effect? Subclass QGraphicsEffect
47
48. As Simple As...
QGraphicsGrayscaleEffect *effect;
effect = new QGraphicsGrayscaleEffect;
item->setGraphicsEffect(effect);
Effect is applied to the item
and its children!
48
