Special Effects with Qt Graphics View

51,445 views
50,871 views

Published on

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

Published in: Technology, Business
3 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
51,445
On SlideShare
0
From Embeds
0
Number of Embeds
372
Actions
Shares
0
Downloads
750
Comments
3
Likes
22
Embeds 0
No embeds

No notes for slide

Special Effects with Qt Graphics View

  1. 1. Special F/X with Graphics View 09/25/09 Ariya Hidayat
  2. 2. About Myself Open-source Developer Ph.D in EE 2
  3. 3. Agenda Four Dot Five – What you can do already Four Dot Six – What you can (ab)use soon 3
  4. 4. Goals Provoke ideas! Incite passion! Engage creativity! 4
  5. 5. A Word of Caution With great power must come great responsibility. 5
  6. 6. Spread the Love All examples are available from... labs.qt.nokia.com bit.ly/graphicsdojo 6
  7. 7. Qt 4.5 7
  8. 8. Gradients Transformation Animation, Kinetic Scrolling Composition Modes 8
  9. 9. Linear Gradient 9
  10. 10. Radial Gradient 10
  11. 11. Gradients: Quick Recipe Applies to: QAbstractGraphicsShapeItem QGraphicsEllipseItem, QGraphicsPathItem, QGraphicsPolygonItem, QGraphicsRectItem or your own subclass(es). Classes to use: – QLinearGradient – QRadialGradient – QConicalGradient 11
  12. 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
  13. 13. 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); 13
  14. 14. Shadow with Gradients magnifier 14
  15. 15. 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(); 15
  16. 16. Translucent Reflection 16
  17. 17. Flip Vertically QImage::mirrored() 17
  18. 18. More Natural Look Linear gradient, on the alpha channel 18
  19. 19. 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); 19
  20. 20. Opacity QPainter::setOpacity(...) 20
  21. 21. Transformation Scaling Rotation Perspective 21
  22. 22. Rotation transform.rotate(30, Qt::ZAxis) 22
  23. 23. Perspective Transformation: The Recipe transform.rotate (60, Qt::XAxis) transform.rotate(60, Qt::YAxis) 23
  24. 24. Reflection & Transformation 24
  25. 25. Timeline-based Animation deacceleration acceleration 25
  26. 26. Linear Motion vs Non-linear Motion Linear EaseInOut deacceleration acceleration 26
  27. 27. Flick List (or Kinetic Scrolling) 27
  28. 28. Using FlickCharm QGraphicsView canvas; FlickCharm charm; charm.activateOn(&canvas); 28
  29. 29. Flick Charm & Event Filtering Mouse move Mouse press Pressed Manual Scroll Mouse release Steady Mouse release Mouse move Auto Scroll Mouse press Stop Timer tick 29
  30. 30. Parallax Effect 30
  31. 31. Composition Modes 31
  32. 32. Colorize (or Tint Effect) 32
  33. 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. 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
  35. 35. Glow Effect 35
  36. 36. Night Mode 36
  37. 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. 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
  39. 39. Qt 4.6 39
  40. 40. Animation Framework State Machine Graphics Effects 40
  41. 41. Animation Framework 41
  42. 42. What People Want – (soft) drop shadow – blur – colorize – some other random stuff 42
  43. 43. Graphics F/X QGraphicsEffect QGraphicsColorizeEffect QGraphicsGrayscaleEffect QGraphicsPixelizeEffect QGraphicsBlurEffect QGraphicsDropShadowEffect QGraphicsOpacityEffect 43
  44. 44. Challenges – software vs hardware – good API 44
  45. 45. 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 45
  46. 46. API One API to rule them all, ... 46
  47. 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. 48. As Simple As... QGraphicsGrayscaleEffect *effect; effect = new QGraphicsGrayscaleEffect; item->setGraphicsEffect(effect); Effect is applied to the item and its children! 48
  49. 49. Grayscale Effect 49
  50. 50. Grayscale Effect with Strength=0.8 50
  51. 51. Colorize Effect 51
  52. 52. Colorize Effect with Strength=0.8 52
  53. 53. Pixelize Effect 53
  54. 54. Blur Effect 54
  55. 55. Drop Shadow Effect 55
  56. 56. Lighting Example 56
  57. 57. Blur Picker Example blurry sharp 57
  58. 58. Fade Message Example Something will happen 58
  59. 59. Scale Effect 59
  60. 60. Scale Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); painter->save(); painter->setBrush(Qt::NoBrush); painter->setPen(Qt::red); painter->drawRect(pixmap.rect()); painter->scale(0.5, 0.5); painter->translate(pixmap.rect().bottomRight()/2); painter->drawPixmap(0, 0, pixmap); painter->restore(); } 60
  61. 61. Night Mode Effect 61
  62. 62. Night Mode Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); QPainter p(&pixmap); p.setCompositionMode (QPainter::CompositionMode_Difference); p.fillRect(pixmap.rect(), Qt::white); p.end(); painter->drawPixmap(0, 0, pixmap); } 62
  63. 63. Frame Effect 63
  64. 64. Extending the Bounding Box QRectF boundingRectFor(const QRectF &rect) const { return rect.adjusted(-5, -5, 5, 5); } item bounding box “effective” bounding box 64
  65. 65. Frame Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); QRectF bound = boundingRectFor(pixmap.rect()); painter->save(); painter->setPen(Qt::NoPen); painter->setBrush(Qt::green); painter->drawRoundedRect(bound, 15, 15); painter->drawPixmap(0, 0, pixmap); painter->restore(); } 65
  66. 66. Reflection Effect 66
  67. 67. Enlarging the Bounding Box (Again) QRectF boundingRectFor(const QRectF &rect) const { return rect.adjusted(0, 0, 0, rect.height()); } item bounding box “effective” bounding box 67
  68. 68. Reflection Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); painter->save(); painter->drawPixmap(0, 0, pixmap); painter->setOpacity(0.2); painter->scale(1, -1); painter->translate(0, -pixmap.height()); painter->drawPixmap(0, 0, pixmap); painter->restore(); } 68
  69. 69. Qt 4.7? Future? 69
  70. 70. Declarative UI 70
  71. 71. Further Directions – Optimization! – Composite effects – Geometry deformation – Morphing – More physics: force, gravity, ... – Bitmap vs vector 71
  72. 72. Genie Effect 72
  73. 73. Deformation 73
  74. 74. Underwater Effect 74
  75. 75. That's all, folks... Thank You! 75
  76. 76. Bleeding-Edge labs.qt.nokia.com bit.ly/graphicsdojo 76

×