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>
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/src
parent: 4aa878fe08f8ed3f76cabf8a6b21603fa21fcb09 (diff)
8 files changed, 897 insertions, 0 deletions
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();
+    }
+}
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/src
parent	4aa878fe08f8ed3f76cabf8a6b21603fa21fcb09 (diff)