(QT)Special FX with Graphics View

11
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);
33
Overlay with Color
QPainter painter(&resultImage); painter.drawImage(0, 0, grayscaled(image)); painter.setCompositionMode (QPainter::CompositionMode_Overlay); painter.fillRect(resultImage.rect(), color); painter.end();
10
Gradients: Quick Recipe
Applies to: QAbstractGraphicsShapeItem QGraphicsEllipseItem, QGraphicsPathItem, QGraphicsPolygonItem, QGraphicsRectItem or your own subclass(es). Classes to use: – QLinearGradient – QRadialGradient – QConicalGradient
Linear EaseInOut deacceleration
acceleration
26
Flick List (or Kinetic Scrolling)
27
Using FlickCharm
QGraphicsView canvas; FlickCharm charm; charm.activateOn(&canvas);
Special F/X with Graphics View
Ariya Hidayat
09/25/09
About Myself
Open-source Developer
Ph.D in EE
2
Agenda
Four Dot Five – What you can do already Four Dot Six – What you can (ab)use soon
38
Qt 4.6
39
Animation Framework State Machine Graphics Effects
40
Animation Framework
41
What People Want
– (soft) drop shadow – blur – colorize – some other random stuff
bit.ly/graphicsdojo
6
Qt 4.5
7
Gradients Transformation Animation, Kinetic Scrolling Composition Modes
8
Linear Gradient
9
Radial Gradient
12
Radial Gradient: The Code
QRadialGradient gr(100, 100, 100, 60, 60); gr.setColorAt(0.0, QColor(255, 255, 255, 191)); gr.setColorAt(0.2, QColor(255, 255, 127, 191)); gr.setColorAt(0.9, QColor(150, 150, 200, 63)); p.setBrush(gr); p.drawEllipse(0, 0, 200, 200);
48
Grayscale Effect
49
Grayscale Effect with Strength=0.8
50
Colorize Effect
51
Colorize Effect with Strength=0.8
52
Pixelize Effect
53
Blur Effect
54
Drop Shadow Effect
55
Lighting Example
56
Blur Picker Example
blurry
sharp
57
Fade Message Example
Something will happen
58
Scale Effect
15
Translucent Reflection
16
Flip Vertically
QImage::mirrored()
17
More Natural Look
Linear gradient, on the alpha channel
18
Reflection: The Code
QPoint start(0, 0); QPoint end(0, img.height()); QLinearGradient gradient(start, end); gradient.setColorAt(0.5, Qt::black); gradient.setColorAt(0, Qt::white); QImage mask = img; QPainter painter(&mask); painter.fillRect(img.rect(), gradient); painter.end(); QImage reflection = img.mirrored(); reflection.setAlphaChannel(mask);
red = 255 – red green = 255 – green blue = 255 - blue
37
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>
42
Graphics F/X
QGraphicsEffect
QGraphicsColorizeEffect QGraphicsGrayscaleEffect QGraphicsPixelizeEffect QGraphicsBlurEffect QGraphicsDropShadowEffect QGraphicsOpacityEffect
45
API
One API to rule them all, ...
46
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
19
Opacity
QPainter::setOpacity(...)
20
Transformation
Scaling
Rotation
Perspective
21
Rotation
transform.rotate(30, Qt::ZAxis)
22
Perspective Transformation: The Recipe
43
Challenges
– software vs hardware – good API
44
Software vs Hardware
– software implementation • consistent and reliable • easy to test • cumbersome, (dog)slow – hardware acceleration • blazing fast • custom effects are easy • silicon/driver dependent
13
Shadow with Gradients
magnifier
14
Shadow: The Code
QRadialGradient g; g.setCenter(radius, radius); g.setFocalPoint(radius, radius); g.setRadius(radius); g.setColorAt(1.0, QColor(255, 255, 255, 0)); g.setColorAt(0.5, QColor(128, 128, 128, 255)); QPainter mask(&maskPixmap); mask.setCompositionMode (QPainter::CompositionMode_Source); mask.setBrush(g); mask.drawRect(maskPixmap.rect()); mask.setBrush(QColor(Qt::transparent)); mask.drawEllipse(g.center(), radius-15, radius-15); mask.end();
28
Flick Charm & Event Filtering
Mouse press