diff options
| author | Vladimir Minenko <vladimir.minenko@nokia.com> | 2012-06-18 12:12:21 +0200 |
|---|---|---|
| committer | Venugopal Shivashankar <venugopal.shivashankar@digia.com> | 2013-02-08 12:30:13 +0100 |
| commit | e9053ba3f559fcf8c4d2dd3b6f87cce0979d0244 (patch) | |
| tree | 0e6503d0068bed7b57ba751d4c200a70e5c5e7d3 /canvas_tutorial/html5canvas.rst | |
| parent | 4aa878fe08f8ed3f76cabf8a6b21603fa21fcb09 (diff) | |
Initial commit to add the learning-guide content
Change-Id: I5eb8ab089b46122bc6f7042e20541bf70f173447
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Diffstat (limited to 'canvas_tutorial/html5canvas.rst')
| -rw-r--r-- | canvas_tutorial/html5canvas.rst | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/canvas_tutorial/html5canvas.rst b/canvas_tutorial/html5canvas.rst new file mode 100644 index 0000000..b71d277 --- /dev/null +++ b/canvas_tutorial/html5canvas.rst @@ -0,0 +1,49 @@ +.. + --------------------------------------------------------------------------- + Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). + All rights reserved. + This work, unless otherwise expressly stated, is licensed under a + Creative Commons Attribution-ShareAlike 2.5. + The full license document is available from + http://creativecommons.org/licenses/by-sa/2.5/legalcode . + --------------------------------------------------------------------------- + + +Porting HTML5 Canvas Code to Qt Quick +===================================== + +In this page, we want to show how easy it is to port existing HTML5 Canvas code to Qt Quick using the Canvas element. + +.. note:: + A general list of the necessary changes can be found in `the Qt documentation pages of the Qt Quick Canvas <http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-canvas.html>`_. + + +The HTML5 Canvas Code +--------------------- + +`This link <https://developer.mozilla.org/en/Canvas_tutorial/Transformations>`_ leads to an HTML5 Canvas tutorial, in which one of the examples shows a `spirograph <http://en.wikipedia.org/wiki/Spirograph>`_. + +The HTML5 code looks like this: + +.. literalinclude:: src/spirograph-html.js + :language: js + + +The Qt Quick Canvas Code +------------------------ + +To use this code in a Qt Quick Canvas, we can almost simply copy the HTML5 code's drawing function into the Canvas element's ``onPaint`` handler. We only need to change the line in which we acquire the drawing context: instead of using a DOM API call (``document.getElementById('canvas')``), we access the canvas element directly. The used JavaScript function can be inserted as a member function of the element. + +.. literalinclude:: src/spirograph.qml + :language: js + +This is what the application looks like: + +.. image:: img/spirograph.png + :scale: 50% + +As you can see, it is surprisingly easy to use existing HTML5 Canvas code in your Qt Quick application. + +.. rubric:: What's Next? + +The next chapter concludes this tutorial. |