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 | |
| 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')
24 files changed, 1672 insertions, 0 deletions
diff --git a/canvas_tutorial/Makefile b/canvas_tutorial/Makefile new file mode 100644 index 0000000..bdb7331 --- /dev/null +++ b/canvas_tutorial/Makefile @@ -0,0 +1,139 @@ +# Makefile for Sphinx documentation +# + +# You can set these variables from the command line. +SPHINXOPTS = +SPHINXBUILD = sphinx-build +PAPER = +BUILDDIR = _build + +# Internal variables. +PAPEROPT_a4 = -D latex_paper_size=a4 +PAPEROPT_letter = -D latex_paper_size=letter +ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) . + +.PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest dita + +help: + @echo "Please use \`make <target>' where <target> is one of" + @echo " html to make standalone HTML files" + @echo " dirhtml to make HTML files named index.html in directories" + @echo " singlehtml to make a single large HTML file" + @echo " pickle to make pickle files" + @echo " json to make JSON files" + @echo " htmlhelp to make HTML files and a HTML help project" + @echo " qthelp to make HTML files and a qthelp project" + @echo " devhelp to make HTML files and a Devhelp project" + @echo " epub to make an epub" + @echo " latex to make LaTeX files, you can set PAPER=a4 or PAPER=letter" + @echo " latexpdf to make LaTeX files and run them through pdflatex" + @echo " text to make text files" + @echo " man to make manual pages" + @echo " changes to make an overview of all changed/added/deprecated items" + @echo " linkcheck to check all external links for integrity" + @echo " doctest to run all doctests embedded in the documentation (if enabled)" + @echo " dita to make dita topic base documents and a ditamap" + + +clean: + -rm -rf $(BUILDDIR)/* + +html: + $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html + @echo + @echo "Build finished. The HTML pages are in $(BUILDDIR)/html." + +dirhtml: + $(SPHINXBUILD) -b dirhtml $(ALLSPHINXOPTS) $(BUILDDIR)/dirhtml + @echo + @echo "Build finished. The HTML pages are in $(BUILDDIR)/dirhtml." + +singlehtml: + $(SPHINXBUILD) -b singlehtml $(ALLSPHINXOPTS) $(BUILDDIR)/singlehtml + @echo + @echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml." + +pickle: + $(SPHINXBUILD) -b pickle $(ALLSPHINXOPTS) $(BUILDDIR)/pickle + @echo + @echo "Build finished; now you can process the pickle files." + +json: + $(SPHINXBUILD) -b json $(ALLSPHINXOPTS) $(BUILDDIR)/json + @echo + @echo "Build finished; now you can process the JSON files." + +htmlhelp: + $(SPHINXBUILD) -b htmlhelp $(ALLSPHINXOPTS) $(BUILDDIR)/htmlhelp + @echo + @echo "Build finished; now you can run HTML Help Workshop with the" \ + ".hhp project file in $(BUILDDIR)/htmlhelp." + +qthelp: + $(SPHINXBUILD) -b qthelp -D html_theme=qtcreator $(ALLSPHINXOPTS) $(BUILDDIR)/qthelp + @echo + @echo "Uses now the qtcreator theme from custom themes folder." + @echo "Build finished; now you can run "qcollectiongenerator" with the" \ + ".qhcp project file in $(BUILDDIR)/qthelp, like this:" + @echo "# qcollectiongenerator $(BUILDDIR)/qthelp/QtQuickCanvasTutorial.qhcp" + @echo "To view the help file:" + @echo "# assistant -collectionFile $(BUILDDIR)/qthelp/QtQuickCanvasTutorial.qhc" + +devhelp: + $(SPHINXBUILD) -b devhelp $(ALLSPHINXOPTS) $(BUILDDIR)/devhelp + @echo + @echo "Build finished." + @echo "To view the help file:" + @echo "# mkdir -p $$HOME/.local/share/devhelp/QtJsonDbTutorial" + @echo "# ln -s $(BUILDDIR)/devhelp $$HOME/.local/share/devhelp/QtQuickCanvasTutorial" + @echo "# devhelp" + +epub: + $(SPHINXBUILD) -b epub $(ALLSPHINXOPTS) $(BUILDDIR)/epub + @echo + @echo "Build finished. The epub file is in $(BUILDDIR)/epub." + +latex: + $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex + @echo + @echo "Build finished; the LaTeX files are in $(BUILDDIR)/latex." + @echo "Run \`make' in that directory to run these through (pdf)latex" \ + "(use \`make latexpdf' here to do that automatically)." + +latexpdf: + $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex + @echo "Running LaTeX files through pdflatex..." + make -C $(BUILDDIR)/latex all-pdf + @echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex." + +text: + $(SPHINXBUILD) -b text $(ALLSPHINXOPTS) $(BUILDDIR)/text + @echo + @echo "Build finished. The text files are in $(BUILDDIR)/text." + +man: + $(SPHINXBUILD) -b man $(ALLSPHINXOPTS) $(BUILDDIR)/man + @echo + @echo "Build finished. The manual pages are in $(BUILDDIR)/man." + +changes: + $(SPHINXBUILD) -b changes $(ALLSPHINXOPTS) $(BUILDDIR)/changes + @echo + @echo "The overview file is in $(BUILDDIR)/changes." + +linkcheck: + $(SPHINXBUILD) -b linkcheck $(ALLSPHINXOPTS) $(BUILDDIR)/linkcheck + @echo + @echo "Link check complete; look for any errors in the above output " \ + "or in $(BUILDDIR)/linkcheck/output.txt." + +doctest: + $(SPHINXBUILD) -b doctest $(ALLSPHINXOPTS) $(BUILDDIR)/doctest + @echo "Testing of doctests in the sources finished, look at the " \ + "results in $(BUILDDIR)/doctest/output.txt." + +dita: + $(SPHINXBUILD) -b dita $(ALLSPHINXOPTS) $(BUILDDIR)/dita + @echo "Produces topic based dita output including a ditamap based on " \ + "master doc toc tree results in $(BUILDDIR)/dita/index.ditamap." + diff --git a/canvas_tutorial/about.rst b/canvas_tutorial/about.rst new file mode 100644 index 0000000..46646fb --- /dev/null +++ b/canvas_tutorial/about.rst @@ -0,0 +1,53 @@ +.. + --------------------------------------------------------------------------- + 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 . + --------------------------------------------------------------------------- + + +About this Guide +================ + +Why Would You Want to Read this Guide? +-------------------------------------- + +The goal of this guide is to make you familiar with best programming practices using the Canvas Item in Qt Quick 2.0 as part of Qt 5. +A prerequisite to this guide is to have a solid understanding of the QML language and also use the Qt Quick Application Development Primer as your first guide on how to use Qt Quick for application development. Throughout this guide, we’ll walk you through various aspects and examples of Qt Quick 2.0 Painting API with Canvas. References to other information sources are provided to make it easy for you to deepen your understanding of the used API. + +.. _get-desktop-source-code: + +Get the Source Code and the Guide in Different Formats +------------------------------------------------------ + +.. Todo: Change the download links + +A .zip file that contains the source code of each chapter is provided: + + `Source code <http://get.qt.nokia.com/developerguides/canvastutorial/canvasexample_src.zip>`_ + +The guide is available in the following formats: + + `PDF <http://get.qt.nokia.com/developerguides/canvastutorial/QtQuickCanvasTutorial.pdf>`_ + `ePub <http://get.qt.nokia.com/developerguides/canvastutorial/QtQuickCanvasTutorial.epub>`_ for ebook readers. Further details can be found `here <http://en.wikipedia.org/wiki/EPUB#Software_reading_systems>`_. + `Qt Help <http://get.qt.nokia.com/developerguides/canvastutorial/QtQuickCanvasTutorial.qch>`_ for Qt Assistant and Qt Creator. In Qt Assistant under the :qt:`Preferences Dialog <assistant-details.html#preferences-dialog>`, in the `Documentation` tab (in a collapsible menu for Mac users), you click on the Add button in order to add this guide in the .qch format. We do the same in Qt Creator, under the `Options` dialog, in the `Help` section you, can add this guide in the `Documentation` tab. + + +License +------- + +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 . + +Qt and the Qt logo is a registered trade mark of Digia plc and/or its subsidiaries and is used pursuant to a license from Digia plc and/or its subsidiaries. All other trademarks are property of their respective owners. + +.. rubric:: What's Next? + +Next we will go through a brief instruction of the Painting APIs in Qt Quick 2.0 and a basic example. diff --git a/canvas_tutorial/conclusion.rst b/canvas_tutorial/conclusion.rst new file mode 100644 index 0000000..c5b38e3 --- /dev/null +++ b/canvas_tutorial/conclusion.rst @@ -0,0 +1,27 @@ +.. + --------------------------------------------------------------------------- + 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 . + --------------------------------------------------------------------------- + + +Conclusion +========== + +In this tutorial, we explored some of the capabilities of the Qt Quick Canvas. We developed a nice looking pie chart visualization and ported HTML5 Canvas code to Qt Quick. If you want to learn more about the canvas API, you may consult some of the various HTML5 tutorials available on the internet. + +This is an incomplete list of tutorials which we consider helpful: + + `http://www.html5canvastutorials.com <http://www.html5canvastutorials.com>`_ - A page dedicated to HTML5 Canvas tutorials + `https://developer.mozilla.org/en/Canvas_tutorial <https://developer.mozilla.org/en/Canvas_tutorial>`_ - An HTML5 Canvas tutorial on the Mozilla Developer Network + `http://dev.opera.com/articles/view/html-5-canvas-the-basics <http://dev.opera.com/articles/view/html-5-canvas-the-basics>`_ - HTML5 Canvas basics on the Opera developer portal + `http://www.canvasdemos.com <http://www.canvasdemos.com>`_ - A page presenting HTML5 Canvas demos + +`The Qt Webkit Guide about canvas graphics <http://qt-project.org/doc/qt-4.8/qtwebkit-guide-canvas.html>`_ also gives a detailed introduction to the HTML5 Canvas API. + +Also note `this very handy cheat sheet <http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html>`_. + diff --git a/canvas_tutorial/conf.py b/canvas_tutorial/conf.py new file mode 100644 index 0000000..185ce92 --- /dev/null +++ b/canvas_tutorial/conf.py @@ -0,0 +1,48 @@ +import sys, os + +# register path to our extensions relative to this file +sys.path.insert(0, os.path.abspath('../scripts')) + +# install the shared default configuration +from qtextensions.shared.conf import * + +# -- General configuration ----------------------------------------------------- + +# General information about the project. +project = u'Qt Quick Painting using Canvas Item' + +# -- Options for HTML output --------------------------------------------------- + +# The name for this set of Sphinx documents. If None, it defaults to +# "<project> v<release> documentation". +html_title = "Qt Quick Painting using Canvas Item" + +# A shorter title for the navigation bar. Default is the same as html_title. +html_short_title = "Qt Quick Canvas Item Tutorial" + +# Output file base name for HTML help builder. +htmlhelp_basename = 'QtQuickCanvasTutorial' + + +# -- Options for LaTeX output -------------------------------------------------- + +latex_documents = [ + ('index', 'QtQuickCanvasTutorial.tex', u'Qt Quick Painting using Canvas Item', + u'Nokia, Qt Learning', 'manual'), +] + +# -- Options for Epub output --------------------------------------------------- + +# The basename for the epub file. It defaults to the project name w/o spaces +epub_basename = 'QtQuickCanvasTutorial' + +# Bibliographic Dublin Core info. +epub_title = u'QtQuickCanvasTutorial' + +# -- Options for Qt Help output --------------------------------------------------- +# The basename for the Qt help file. It defaults to the project name w/o spaces +qthelp_basename = 'QtQuickCanvasTutorial' + +show_authors = True +version = '1.0' +release = '1.0' 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. diff --git a/canvas_tutorial/img/canvas.png b/canvas_tutorial/img/canvas.png Binary files differnew file mode 100644 index 0000000..f367176 --- /dev/null +++ b/canvas_tutorial/img/canvas.png diff --git a/canvas_tutorial/img/piechart-1.png b/canvas_tutorial/img/piechart-1.png Binary files differnew file mode 100644 index 0000000..550b0ff --- /dev/null +++ b/canvas_tutorial/img/piechart-1.png diff --git a/canvas_tutorial/img/piechart-2.png b/canvas_tutorial/img/piechart-2.png Binary files differnew file mode 100644 index 0000000..c5d6b0a --- /dev/null +++ b/canvas_tutorial/img/piechart-2.png diff --git a/canvas_tutorial/img/piechart-3.png b/canvas_tutorial/img/piechart-3.png Binary files differnew file mode 100644 index 0000000..2db8904 --- /dev/null +++ b/canvas_tutorial/img/piechart-3.png diff --git a/canvas_tutorial/img/piechart-sector-graphic.png b/canvas_tutorial/img/piechart-sector-graphic.png Binary files differnew file mode 100644 index 0000000..6b2d3a4 --- /dev/null +++ b/canvas_tutorial/img/piechart-sector-graphic.png diff --git a/canvas_tutorial/img/piechart-sector-graphic.svg b/canvas_tutorial/img/piechart-sector-graphic.svg new file mode 100644 index 0000000..7348573 --- /dev/null +++ b/canvas_tutorial/img/piechart-sector-graphic.svg @@ -0,0 +1,235 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="300" + height="300" + id="svg2985" + version="1.1" + inkscape:version="0.48.1 r9760" + sodipodi:docname="piechart-sector-graphic.svg" + inkscape:export-filename="/home/naoya/QmlBook/GIT/qt5guide/chapter03/img/piechart-sector-graphic.png" + inkscape:export-xdpi="90" + inkscape:export-ydpi="90"> + <defs + id="defs2987"> + <marker + inkscape:stockid="StopM" + orient="auto" + refY="0.0" + refX="0.0" + id="StopM" + style="overflow:visible"> + <path + id="path3982" + d="M 0.0,5.65 L 0.0,-5.65" + style="fill:none;fill-opacity:0.75000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt" + transform="scale(0.4)" /> + </marker> + <marker + inkscape:stockid="Arrow1Mend" + orient="auto" + refY="0.0" + refX="0.0" + id="Arrow1Mend" + style="overflow:visible;"> + <path + id="path3818" + d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " + style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;" + transform="scale(0.4) rotate(180) translate(10,0)" /> + </marker> + </defs> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="2" + inkscape:cx="146.91009" + inkscape:cy="177.12108" + inkscape:current-layer="layer1" + inkscape:document-units="px" + showgrid="true" + inkscape:snap-global="true" + showguides="false" + inkscape:snap-center="true" + inkscape:snap-object-midpoints="true" + inkscape:window-width="1680" + inkscape:window-height="973" + inkscape:window-x="0" + inkscape:window-y="24" + inkscape:window-maximized="1" + inkscape:snap-grids="false" + inkscape:object-nodes="false" + inkscape:snap-bbox="true" + inkscape:bbox-nodes="false" + inkscape:object-paths="false" + inkscape:snap-to-guides="true" + inkscape:snap-nodes="true" + inkscape:snap-page="true"> + <inkscape:grid + type="xygrid" + id="grid2993" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" /> + </sodipodi:namedview> + <metadata + id="metadata2990"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer" + transform="translate(0,-180)"> + <rect + style="fill:#ffffff;fill-opacity:1;stroke:none" + id="rect3004" + width="300" + height="300" + x="2.6645353e-15" + y="180" /> + <path + sodipodi:type="arc" + style="fill:none;stroke:#808080;stroke-width:0.61136871999999998;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + id="path2995" + sodipodi:cx="188.49207" + sodipodi:cy="186.11111" + sodipodi:rx="68.253967" + sodipodi:ry="54.761906" + d="m 256.74603,186.11111 c 0,30.24417 -30.55834,54.76191 -68.25396,54.76191 -37.69563,0 -68.25397,-24.51774 -68.25397,-54.76191 0,-30.24416 30.55834,-54.7619 68.25397,-54.7619 37.69562,0 68.25396,24.51774 68.25396,54.7619 z" + transform="matrix(1.4651164,0,0,1.8260869,-126.16281,-9.8550715)" /> + <path + style="fill:none;stroke:#808080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 146.5,326.50001 7,7 0,0 0,0" + id="path2999" + inkscape:connector-curvature="0" /> + <path + style="fill:none;stroke:#808080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 146.5,333.5 7,-6.99999" + id="path3001" + inkscape:connector-curvature="0" /> + <path + sodipodi:type="arc" + style="fill:#00ff00;fill-opacity:1;stroke:#808080;stroke-width:0.53890519000000003;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;opacity:1" + id="path3779" + sodipodi:cx="155" + sodipodi:cy="147.5" + sodipodi:rx="50" + sodipodi:ry="57.5" + d="m 190.35534,188.15864 c -19.52622,22.45515 -51.18446,22.45515 -70.71068,0 0,0 0,0 0,0 L 155,147.5 z" + transform="matrix(1.9798989,0,0,1.7391304,-156.88434,73.478271)" + sodipodi:start="0.78539816" + sodipodi:end="2.3561945" /> + <path + style="fill:none;stroke:#999999;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0" + d="m 150,30 0,240" + id="path3771" + inkscape:connector-curvature="0" + transform="translate(0,180)" /> + <path + style="fill:none;stroke:#999999;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0" + d="m 30,150 240,0" + id="path3775" + inkscape:connector-curvature="0" + transform="translate(0,180)" /> + <path + sodipodi:type="arc" + style="fill:none;stroke:#000000;stroke-width:0.93541432000000002;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker-end:url(#Arrow1Mend)" + id="path3783" + sodipodi:cx="147.5" + sodipodi:cy="155" + sodipodi:rx="17.5" + sodipodi:ry="20" + d="m 165,155 c 0,5.30433 -1.84374,10.39141 -5.12563,14.14214" + transform="matrix(1.1428572,0,0,1,-18.571432,175)" + sodipodi:start="0" + sodipodi:end="0.78539816" + sodipodi:open="true" /> + <path + sodipodi:type="arc" + style="fill:none;stroke:#000000;stroke-width:1.03509808000000003;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker-start:none;marker-mid:none;marker-end:url(#Arrow1Mend)" + id="path3785" + sodipodi:cx="160" + sodipodi:cy="157.5" + sodipodi:rx="35" + sodipodi:ry="37.5" + d="m 195,157.5 c 0,20.71068 -15.67003,37.5 -35,37.5 -9.28258,0 -18.18496,-3.95088 -24.74874,-10.9835" + transform="matrix(1,0,0,0.93333337,-9.9999996,182.99999)" + sodipodi:start="0" + sodipodi:end="2.3561945" + sodipodi:open="true" /> + <text + xml:space="preserve" + style="font-size:10px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" + x="-109.60155" + y="350.01785" + id="text5168" + sodipodi:linespacing="125%" + transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"><tspan + sodipodi:role="line" + id="tspan5170" + x="-109.60155" + y="350.01785">StartAngle</tspan></text> + <text + xml:space="preserve" + style="font-size:10px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" + x="-98.994949" + y="360.62445" + id="text5172" + sodipodi:linespacing="125%" + transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"><tspan + sodipodi:role="line" + id="tspan5174" + x="-98.994949" + y="360.62445">EndAngle</tspan></text> + <text + xml:space="preserve" + style="font-size:10px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" + x="379.34528" + y="123.39541" + id="text5176" + sodipodi:linespacing="125%" + transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"><tspan + sodipodi:role="line" + id="tspan5178" + x="379.34528" + y="123.39541">Radius</tspan></text> + <path + style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#StopM);marker-end:url(#StopM)" + d="m 150,330 70.71068,70.71068" + id="path5556" + inkscape:connector-curvature="0" /> + <text + xml:space="preserve" + style="font-size:10px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" + x="111.31836" + y="324.8584" + id="text5932" + sodipodi:linespacing="125%"><tspan + sodipodi:role="line" + id="tspan5934" + x="111.31836" + y="324.8584">Center</tspan></text> + </g> +</svg> diff --git a/canvas_tutorial/img/piechart-sector.png b/canvas_tutorial/img/piechart-sector.png Binary files differnew file mode 100644 index 0000000..7a5b8d8 --- /dev/null +++ b/canvas_tutorial/img/piechart-sector.png diff --git a/canvas_tutorial/img/spirograph.png b/canvas_tutorial/img/spirograph.png Binary files differnew file mode 100644 index 0000000..83a5d31 --- /dev/null +++ b/canvas_tutorial/img/spirograph.png diff --git a/canvas_tutorial/index.rst b/canvas_tutorial/index.rst new file mode 100644 index 0000000..c9effb8 --- /dev/null +++ b/canvas_tutorial/index.rst @@ -0,0 +1,22 @@ +.. + --------------------------------------------------------------------------- + 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 . + --------------------------------------------------------------------------- + +Qt Quick Painting Using the Canvas Item +======================================= + +.. toctree:: + :maxdepth: 2 + :numbered: + + about + introduction + piechart + html5canvas + conclusion diff --git a/canvas_tutorial/introduction.rst b/canvas_tutorial/introduction.rst new file mode 100644 index 0000000..820fb3f --- /dev/null +++ b/canvas_tutorial/introduction.rst @@ -0,0 +1,76 @@ +.. + --------------------------------------------------------------------------- + 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 . + --------------------------------------------------------------------------- + + +Introduction +============ + +If you want to draw custom graphics from within your Qt Quick application, the `Qt Quick Canvas <http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-canvas.html>`_ item is your item of choice. + +The Canvas element was introduced in Qt Quick 2.0 and provides an area on which you can draw using JavaScript code. It uses a high level command-set based on `the HTML5 Canvas specification <http://www.w3.org/TR/html5/the-canvas-element.html>`_, which allows you to draw basic and complex shapes, add coloring, gradients, shadows, images, text etc, but also grants access to low level pixel data. The employment of JavaScript facilitates the presentation of dynamic content. + +After a brief introduction to the Canvas element, we'll develop an interactive pie chart visualization. Later in this guide, we'll see how to port existing HTML5 Canvas code to a Qt Quick 2 application. + +This tutorial introduces you to the Qt Quick Canvas using self contained example programs and is not meant to show each and every aspect of this element. A detailed description of the Canvas and its supported rendering commands can be found in the Qt documentation pages (see: `Canvas <http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-canvas.html>`_, `Context2D <http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-context2d.html>`_). Also note, that a huge number of very good HTML5 Canvas API tutorials is available on the internet. Since the Qt Quick Canvas element implements this command-set, these tutorials can serve as an excellent starting point to learn drawing. We provide a few links at `the end of this tutorial <conclusion.html>`_. We also assume that you are already familiar with Qt Quick in general, as this tutorial will use non Canvas related features without further notice. + + +A Basic Example +--------------- + +The Qt Quick Canvas element is the element that you place in your application to draw upon. The actual drawing as well as the resource handling is done by its associated `Context2D <http://doc.qt.nokia.com/qt5-snapshot/qml-qtquick2-context2d.html>`_. This element provides the drawing API and manages the transformation stack and style state. It also lets you customize some of its internals such as multithreading, tiling and the usage of hardware acceleration. + +Let's start with a simple example: a small piece of code that displays a colored rectangle: + +.. image:: img/canvas.png + :scale: 50% + +This is the source code: + +.. literalinclude:: src/canvas.qml + :language: js + +The usual way is to declare a ``Canvas`` element and place the drawing commands inside its ``onPaint`` handler. After acquiring the drawing context, we prepare a rectangular path using ``rect(real x, real y, real w, real h)``. Then we setup the fill color state to a yellow color using ``fillStyle`` and fill the rectangle by calling ``fill()``. The green border of the rectangle is drawn by setting ``strokeStyle`` and calling ``stroke()`` respectively. ``lineWidth`` sets the width of the stroke. + +.. note:: + The order of ``stroke()`` and ``fill()`` matters: The stroke pattern is drawn centered along the path (in this example with a 2 px width pattern to the left side and a 2 px width pattern to the right side). If we used ``stroke()`` before calling ``fill()``, the fill would over paint the inner part of the border resulting in a 2 px wide border. + + +Essential Context2D Properties / Methods +---------------------------------------- + +Here is an overview of the most frequently used drawing commands: + +================== ================================== ========================= +Group Operation Note +================== ================================== ========================= +Path beginPath() Begin new path +Path moveTo(x, y) Move to position +Path lineTo(x, y) Add line path +Path rect(x, y, width, height) Add rect path +Path ellipse(x, y, width, height) Add ellipse path +Path arc(x, y, radius, startAngle, Add arc path + endAngle, anticlockwise) +Path arcTo(x1, y1, x2, y2, radius) Add arc path +Path text(text, x, y) Add text path +Transformation translate(x, y) Move coordinate system +Transformation rotate(angle) Rotate coordinate system +Transformation scale(x, y) Scale coordinate system +Transformation shear(sh, sv) Shear coordinate system +Style strokeStyle Setup line style +Style lineWidth Setup line width +Style fillStyle Setup fill style +Drawing stroke() Draw path using style +Drawing fill() Fill path using style +================== ================================== ========================= + + +.. rubric:: What's Next? + +In the next chapter we will go through some more advanced usage of the API by drawing a Pie Chart. diff --git a/canvas_tutorial/piechart.rst b/canvas_tutorial/piechart.rst new file mode 100644 index 0000000..4c9ccdc --- /dev/null +++ b/canvas_tutorial/piechart.rst @@ -0,0 +1,126 @@ +.. + --------------------------------------------------------------------------- + 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 . + --------------------------------------------------------------------------- + + +A Pie Chart +=========== + +In this chapter, we'll present a more elaborate example: we'll create a pie chart item that visualizes the data of a Qt Quick ListModel similar to `this Qt Widget example <http://qt-project.org/doc/qt-4.8/itemviews-chart.html>`_. The ListModel's values will also be shown in a ListView next to the chart. If one of its entries is selected, the according sector of the pie chart shall be highlighted. + +The final application will look like this: + +.. image:: img/piechart-3.png + :scale: 50% + + +The Layout & the Conceptual Context of the Pie Chart +---------------------------------------------------- + +Let's start with the layout of the application and the context in which the pie chart lives. This means setting up the ListModel, placing the Canvas element and creating the ListView. + +.. image:: img/piechart-1.png + :scale: 50% + +The data model holds roles for the item's labels, values and color values. We populate this model with an example dataset: + +.. literalinclude:: src/piechart-1.qml + :language: js + :start-after: // [0] + :end-before: // [0] + :append: ... + +The canvas that shows the pie chart is placed in the left half of the application. We'll be implementing the drawing later in the following sections: + +.. literalinclude:: src/piechart-1.qml + :language: js + :prepend: ... + :start-after: // [1] + :end-before: // [1] + :append: ... + +On the right side, we display the model's data in a list view which shows the item's labels and values in colored rows. It represents the legend of the chart so to say: + +.. literalinclude:: src/piechart-1.qml + :language: js + :prepend: ... + :start-after: // [2] + :end-before: // [2] + + +How to Draw a Sector +-------------------- + +A pie chart is a circular chart consisting of several sectors - one for each data set. The area of each sector is proportional to the value it represents. So let's first take a look at how to draw one of the pie chart's sectors. + +The size of a sector is defined by the length of its arc or the arc's subtending angle. If you think of the whole pie having an angle of ``2 PI`` then each sector should cover an angle of ``value * (2 * PI) / SUM_OF_VALUES``. + +.. image:: img/piechart-sector-graphic.png + +To draw the arc, we use the ``arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)`` function, which creates a circular path on the circumference of a circle which is centered around ``(x, y)`` and has the given radius. To complete the pie segment, we also need to draw the lines which go from the circle's center to the arc's edges. Therefore we move the cursor's position to the center point, draw the arc, and then draw a line back to the center. The ``arc()`` function will automatically generate a line from the cursor's initial position at the center to the starting point of the arc in addition to the arc itself. + +.. literalinclude:: src/piechart-sector.js + :language: js + +This is how the output of an application using the code snippet above might look: + +.. image:: img/piechart-sector.png + :scale: 50% + + +Drawing the Chart +----------------- + +Next we will draw the complete pie chart. After this step the application will look like this: + +.. image:: img/piechart-2.png + :scale: 50% + +In the ``onPaint`` handler, we iterate over the model's elements and draw one pie sector for each entry (with its specific start and end angle, and filled with the previously assigned color). To make this set of pieces sum up to form a full circle, we also need to know the model's sum of values. We calculate this value in a JavaScript function. + +.. literalinclude:: src/piechart-2.qml + :language: js + :prepend: ... + :start-after: // [0] + :end-before: // [0] + :append: ... + + +Finalizing the Chart +-------------------- + +In this chapter we'll visually enhance the pie chart's appearance and also provide interactivity. This is a screenshot of the application after this stage: + +.. image:: img/piechart-3.png + :scale: 50% + +In order to make the application more alive, we change the chart's appearance according to the list view's currently selected item. We add a mouse area to the list view and mark the current item with a highlight. To make the canvas respond to changes in the selection, we request a repaint whenever the current item changes. + +.. literalinclude:: src/piechart-3.qml + :language: js + :prepend: ... + :start-after: // [0] + :end-before: // [0] + :append: ... + +The selected entry shall also be indicated in the pie chart. Therefore we increase the associated sector's radius by 2%. We also want this chart sector to always be located on the right side of the chart. For this, we to rotate the canvas element based on the list view's ``currentItem`` property. To smooth this change, we apply a behavior to the rotation using a spring animation. Additionally, we overlay a radial gradient from transparent white to a darker gray to further brush up the pie chart's appearance. + +.. literalinclude:: src/piechart-3.qml + :language: js + :prepend: ... + :start-after: // [1] + :end-before: // [1] + :append: ... + +Now we're done! We've successfully created a nice looking pie chart. + +.. rubric:: What's Next? + +The next chapter will demonstrate how to port HTML5 Canvas code into the Canvas Item of Qt Quick. + diff --git a/canvas_tutorial/src/canvas.qml b/canvas_tutorial/src/canvas.qml new file mode 100644 index 0000000..72640dc --- /dev/null +++ b/canvas_tutorial/src/canvas.qml @@ -0,0 +1,71 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 + +Rectangle { + id: root + width: 360; height: 360 + color: "#3C3C3C" + + Canvas { + id: canvas + width: 300; height: 300 + anchors.centerIn: parent + + onPaint: { + // get the drawing context + var ctx = canvas.getContext('2d') + + // create a rectangle path + ctx.rect(50, 50, 200, 200) + + // setup fill color + ctx.fillStyle = "#FFF0A5" + + // fill path + ctx.fill() + + // setup line width and stroke color + ctx.lineWidth = 4 + ctx.strokeStyle = "#468966" + + // stroke path + ctx.stroke() + } + } +} diff --git a/canvas_tutorial/src/piechart-1.qml b/canvas_tutorial/src/piechart-1.qml new file mode 100644 index 0000000..aa3e331 --- /dev/null +++ b/canvas_tutorial/src/piechart-1.qml @@ -0,0 +1,129 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +// [0] +import QtQuick 2.0 + +Rectangle { + id: root + width: 640 + height: 360 + color: "#3C3C3C" + + ListModel { + id: model + ListElement { label:"Scientific Research"; + value:21; color:"#99e600" } + ListElement { label:"Engineering & Design"; + value:18; color:"#99cc00" } + ListElement { label:"Automotive"; + value:14; color:"#99b300" } + ListElement { label:"Aerospace"; + value:13; color:"#9f991a" } + ListElement { label:"Automation & Machine Tools"; + value:13; color:"#a48033" } + ListElement { label:"Medical & Bioinformatics"; + value:13; color:"#a9664d" } + ListElement { label:"Imaging & Special Effects"; + value:12; color:"#ae4d66" } + ListElement { label:"Defense"; + value:11; color:"#b33380" } + ListElement { label:"Test & Measurement Systems"; + value:9; color:"#a64086" } + ListElement { label:"Oil & Gas"; + value:9; color:"#994d8d" } + ListElement { label:"Entertainment & Broadcasting"; + value:7; color:"#8d5a93" } + ListElement { label:"Financial"; + value:6; color:"#806699" } + ListElement { label:"Consumer Electronics"; + value:4; color:"#8073a6" } + ListElement { label:"Other"; + value:38; color:"#8080b3" } + } + + // [0] + + // [1] + Canvas { + id: canvas + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.horizontalCenter + } + // [1] + + // [2] + ListView { + id: view + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.horizontalCenter + anchors.right: parent.right + anchors.margins: 16 + clip: true + focus: true + model: model + delegate: Item { + width: view.width + height: 32 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + radius: 2 + color: model.color + border.color: Qt.lighter(root.color) + } + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.margins: 8 + text: model.label + color: "#1C1C1C" + } + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.margins: 8 + text: model.value + color: "#1C1C1C" + } + } + } +} +// [2] diff --git a/canvas_tutorial/src/piechart-2.qml b/canvas_tutorial/src/piechart-2.qml new file mode 100644 index 0000000..d07c140 --- /dev/null +++ b/canvas_tutorial/src/piechart-2.qml @@ -0,0 +1,174 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 + +Rectangle { + id: root + width: 640 + height: 360 + color: "#3C3C3C" + + ListModel { + id: model + ListElement { label:"Scientific Research"; + value:21; color:"#99e600" } + ListElement { label:"Engineering & Design"; + value:18; color:"#99cc00" } + ListElement { label:"Automotive"; + value:14; color:"#99b300" } + ListElement { label:"Aerospace"; + value:13; color:"#9f991a" } + ListElement { label:"Automation & Machine Tools"; + value:13; color:"#a48033" } + ListElement { label:"Medical & Bioinformatics"; + value:13; color:"#a9664d" } + ListElement { label:"Imaging & Special Effects"; + value:12; color:"#ae4d66" } + ListElement { label:"Defense"; + value:11; color:"#b33380" } + ListElement { label:"Test & Measurement Systems"; + value:9; color:"#a64086" } + ListElement { label:"Oil & Gas"; + value:9; color:"#994d8d" } + ListElement { label:"Entertainment & Broadcasting"; + value:7; color:"#8d5a93" } + ListElement { label:"Financial"; + value:6; color:"#806699" } + ListElement { label:"Consumer Electronics"; + value:4; color:"#8073a6" } + ListElement { label:"Other"; + value:38; color:"#8080b3" } + } + + ListView { + id: view + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.horizontalCenter + anchors.right: parent.right + anchors.margins: 16 + clip: true + focus: true + model: model + delegate: Item { + width: view.width + height: 32 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + radius: 2 + color: model.color + border.color: Qt.lighter(root.color) + } + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.margins: 8 + text: model.label + color: "#1C1C1C" + } + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.margins: 8 + text: model.value + color: "#1C1C1C" + } + } + } + + // [0] + Canvas { + id: canvas + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.horizontalCenter + + // enable anti-aliasing + smooth: true + + onPaint: { + var ctx = canvas.getContext('2d') + + ctx.clearRect(0, 0, width, height) + + // store the circles properties + var centerX = width / 2 + var centerY = height / 2 + var radius = 0.9 * Math.min(width, height) / 2 + var startAngle = 0.0 + var endAngle = 0.0 + + // calculate the factor that scales the angles + // to make the sectors sum up to a full circle + var angleFactor = 2 * Math.PI / modelSum() + + ctx.lineWidth = 2 + ctx.strokeStyle = Qt.lighter(root.color) + + // iterate over the model's elements + for (var index = 0; index < model.count; index++) { + + // calculate the start and end angles + startAngle = endAngle + endAngle = startAngle + model.get(index).value * angleFactor + + ctx.fillStyle = model.get(index).color + + // draw the piece + ctx.beginPath() + ctx.moveTo(centerX, centerY) + ctx.arc(centerX, centerY, radius, startAngle, endAngle, false) + ctx.lineTo(centerX, centerY) + ctx.fill() + ctx.stroke() + } + } + + // calculate the model's sum of values + function modelSum() { + var modelSum = 0 + for (var index = 0; index < model.count; index++) { + modelSum += model.get(index).value + } + return modelSum + } + } + // [0] +} diff --git a/canvas_tutorial/src/piechart-3.qml b/canvas_tutorial/src/piechart-3.qml new file mode 100644 index 0000000..313fb38 --- /dev/null +++ b/canvas_tutorial/src/piechart-3.qml @@ -0,0 +1,226 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 + +Rectangle { + id: root + width: 640 + height: 360 + color: "#3C3C3C" + + ListModel { + id: model + ListElement { label:"Scientific Research"; + value:21; color:"#99e600" } + ListElement { label:"Engineering & Design"; + value:18; color:"#99cc00" } + ListElement { label:"Automotive"; + value:14; color:"#99b300" } + ListElement { label:"Aerospace"; + value:13; color:"#9f991a" } + ListElement { label:"Automation & Machine Tools"; + value:13; color:"#a48033" } + ListElement { label:"Medical & Bioinformatics"; + value:13; color:"#a9664d" } + ListElement { label:"Imaging & Special Effects"; + value:12; color:"#ae4d66" } + ListElement { label:"Defense"; + value:11; color:"#b33380" } + ListElement { label:"Test & Measurement Systems"; + value:9; color:"#a64086" } + ListElement { label:"Oil & Gas"; + value:9; color:"#994d8d" } + ListElement { label:"Entertainment & Broadcasting"; + value:7; color:"#8d5a93" } + ListElement { label:"Financial"; + value:6; color:"#806699" } + ListElement { label:"Consumer Electronics"; + value:4; color:"#8073a6" } + ListElement { label:"Other"; + value:38; color:"#8080b3" } + } + + // [0] + ListView { + id: view + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.horizontalCenter + anchors.right: parent.right + anchors.margins: 16 + clip: true + focus: true + model: model + delegate: Item { + width: view.width + height: 32 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + radius: 2 + color: model.color + border.color: Qt.lighter(root.color) + } + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.margins: 8 + text: model.label + color: "#1C1C1C" + } + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.margins: 8 + text: model.value + color: "#1C1C1C" + } + + // handle mouse clicks + MouseArea { + anchors.fill: parent + onClicked: { + view.currentIndex = index + } + } + } + + // highlight the currently selected item + highlight: Item { + z: 10 + width: view.currentItem.width + height: view.currentItem.height + Rectangle { + anchors.fill: parent + anchors.margins: 1 + radius: 2 + color: "transparent" + border.width: 3 + border.color: Qt.lighter(model.get(view.currentIndex).color) + Behavior on border.color { + PropertyAnimation {} + } + } + } + + // request a repaint of the canvas whenever + // the currently selected item changes + onCurrentIndexChanged: { + canvas.requestPaint() + } + } + // [0] + + // [1] + Canvas { + id: canvas + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.horizontalCenter + smooth: true + + // animate the rotation + Behavior on rotation { + SpringAnimation { spring: 1; damping: 0.2 } + } + + onPaint: { + var ctx = canvas.getContext('2d') + + ctx.clearRect(0, 0, width, height) + + var centerX = width / 2 + var centerY = height / 2 + var radius = 0.9 * Math.min(width, height) / 2 + var radiusFactor = 1.0 + var startAngle = 0.0 + var endAngle = 0.0 + + var angleFactor = 2 * Math.PI / modelSum() + + ctx.lineWidth = 2 + ctx.strokeStyle = Qt.lighter(root.color) + + for (var index = 0; index < model.count; index++) { + startAngle = endAngle + endAngle = startAngle + model.get(index).value * angleFactor + + // scale the currently selected piece and + // rotate the canvas element accordingly + if (index == view.currentIndex) { + radiusFactor = 1.02 + canvas.rotation = - 180 / Math.PI * (startAngle + + (endAngle - startAngle) / 2) + } else { + radiusFactor = 1.0 + } + + ctx.fillStyle = model.get(index).color + + ctx.beginPath() + ctx.moveTo(centerX, centerY) + ctx.arc(centerX, centerY, radius * radiusFactor, + startAngle, endAngle, false) + ctx.lineTo(centerX, centerY) + ctx.fill() + ctx.stroke() + } + + // overlay a radial gradient + var gradient = ctx.createRadialGradient(centerX, centerY, + 0, centerX, centerY, radius) + gradient.addColorStop(0.0, Qt.rgba(1.0, 1.0, 1.0, 0.0)) + gradient.addColorStop(1.0, Qt.rgba(0.0, 0.0, 0.0, 0.3)) + ctx.beginPath() + ctx.moveTo(centerX, centerY) + ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false) + ctx.fillStyle = gradient + ctx.fill() + } + + function modelSum() { + var modelSum = 0 + for (var index = 0; index < model.count; index++) { + modelSum += model.get(index).value + } + return modelSum + } + } + // [1] +} diff --git a/canvas_tutorial/src/piechart-sector.js b/canvas_tutorial/src/piechart-sector.js new file mode 100644 index 0000000..f9b3e8f --- /dev/null +++ b/canvas_tutorial/src/piechart-sector.js @@ -0,0 +1,57 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +// begin a new path +ctx.beginPath() + +// move the cursor to the center +ctx.moveTo(centerX, centerY) + +// add the arc including the line to the beginning of the arc +ctx.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise) + +// add the line back to the center +ctx.lineTo(centerX, centerY) + +// fill the piece +ctx.fillStyle = fillStyle +ctx.fill() + +// stroke the piece +ctx.lineWidth = lineWidth +ctx.strokeStyle = strokeStyle +ctx.stroke() diff --git a/canvas_tutorial/src/piechart-sector.qml b/canvas_tutorial/src/piechart-sector.qml new file mode 100644 index 0000000..0576b80 --- /dev/null +++ b/canvas_tutorial/src/piechart-sector.qml @@ -0,0 +1,86 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 + +Rectangle { + id: root + width: 360; height: 360 + color: "#3C3C3C" + + Canvas { + id: canvas + anchors.fill: parent + + onPaint: { + var centerX = width / 2 + var centerY = height / 2 + var radius = 0.9 * Math.min(width, height) / 2 + var startAngle = 45 * Math.PI / 180 + var endAngle = 135 * Math.PI / 180 + var anticlockwise = false + var fillStyle = "#FFF0A5" + var lineWidth = 2 + var strokeStyle = "#468966" + + var ctx = canvas.getContext('2d') + + ctx.clearRect(0, 0, width, height) + + // begin a new path + ctx.beginPath() + + // move the cursor to the center + ctx.moveTo(centerX, centerY) + + // add the arc including the line to the beginning of the arc + ctx.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise) + + // add the line back to the center + ctx.lineTo(centerX, centerY) + + // fill the piece + ctx.fillStyle = fillStyle + ctx.fill() + + // stroke the piece + ctx.lineWidth = lineWidth + ctx.strokeStyle = strokeStyle + ctx.stroke() + } + } +} diff --git a/canvas_tutorial/src/spirograph-html.js b/canvas_tutorial/src/spirograph-html.js new file mode 100644 index 0000000..7bff990 --- /dev/null +++ b/canvas_tutorial/src/spirograph-html.js @@ -0,0 +1,69 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.fillRect(0,0,300,300); + for (var i=0;i<3;i++) { + for (var j=0;j<3;j++) { + ctx.save(); + ctx.strokeStyle = "#9CFF00"; + ctx.translate(50+j*100,50+i*100); + drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); + ctx.restore(); + } + } +} +function drawSpirograph(ctx,R,r,O){ + var x1 = R-O; + var y1 = 0; + var i = 1; + ctx.beginPath(); + ctx.moveTo(x1,y1); + do { + if (i>20000) break; + var x2 = (R+r)*Math.cos(i*Math.PI/72) + - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) + var y2 = (R+r)*Math.sin(i*Math.PI/72) + - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) + ctx.lineTo(x2,y2); + x1 = x2; + y1 = y2; + i++; + } while (x2 != R-O && y2 != 0 ); + ctx.stroke(); +} diff --git a/canvas_tutorial/src/spirograph.qml b/canvas_tutorial/src/spirograph.qml new file mode 100644 index 0000000..fb7f0d6 --- /dev/null +++ b/canvas_tutorial/src/spirograph.qml @@ -0,0 +1,85 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 + +Canvas { + id: canvas + width: 300 + height: 300 + + // the function "draw()" can be put into the "onPaint" handler + onPaint: { + + // the acquisition of the rendering context needs to be adapted + var ctx = canvas.getContext('2d'); + + ctx.fillRect(0,0,300,300); + for (var i=0;i<3;i++) { + for (var j=0;j<3;j++) { + ctx.save(); + ctx.strokeStyle = "#9CFF00"; + ctx.translate(50+j*100,50+i*100); + drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); + ctx.restore(); + } + } + } + + // the utility function "drawSpirograph()" can remain unchanged + function drawSpirograph(ctx,R,r,O) { + var x1 = R-O; + var y1 = 0; + var i = 1; + ctx.beginPath(); + ctx.moveTo(x1,y1); + do { + if (i>20000) break; + var x2 = (R+r)*Math.cos(i*Math.PI/72) + - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) + + var y2 = (R+r)*Math.sin(i*Math.PI/72) + - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) + + ctx.lineTo(x2,y2); + x1 = x2; + y1 = y2; + i++; + } while (x2 != R-O && y2 != 0 ); + ctx.stroke(); + } +} |
