From f289fdc53e85bf0f2002070fa883f5c01bae1232 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Sun, 24 Feb 2013 15:47:38 +0100 Subject: Various improvements to Canvas examples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I noticed these examples were rather "aestetically challenged" and decided to make it a test case for our WIP style guidelines. - Use consistent margins (12 px) - Use proposed color palettes - Use proposed fonts and header styles I created a new Slider graphic and moved this into the shared folder as I think it is useful for other examples. I removed a lot of unused files which seem to have been added but never actually used. I also found several bugs in our implementation, including not scaling or rotation around the correct origin. In many cases I simplified the examples, removing variables/sliders where they did not add significantly to the example itself. Change-Id: Ie09da33deaf56a3ec45a2031b87a24a8602e994a Reviewed-by: Samuel Rødal Reviewed-by: Jerome Pasion Reviewed-by: Jens Bache-Wiig --- examples/quick/canvas/bezierCurve/bezierCurve.qml | 146 ++++++++------- examples/quick/canvas/canvas.qrc | 17 -- examples/quick/canvas/clip/clip.qml | 182 +++++++++--------- examples/quick/canvas/contents/Button.qml | 87 --------- examples/quick/canvas/contents/ScrollBar.qml | 74 -------- examples/quick/canvas/contents/Slider.qml | 115 ------------ examples/quick/canvas/contents/TitleBar.qml | 70 ------- examples/quick/canvas/contents/ToolBar.qml | 69 ------- .../canvas/contents/images/button-pressed.png | Bin 571 -> 0 bytes examples/quick/canvas/contents/images/button.png | Bin 564 -> 0 bytes examples/quick/canvas/contents/images/default.svg | 82 -------- examples/quick/canvas/contents/images/gloss.png | Bin 1236 -> 0 bytes examples/quick/canvas/contents/images/lineedit.png | Bin 1415 -> 0 bytes examples/quick/canvas/contents/images/lineedit.sci | 5 - examples/quick/canvas/contents/images/quit.png | Bin 2369 -> 0 bytes examples/quick/canvas/contents/images/stripes.png | Bin 257 -> 0 bytes examples/quick/canvas/contents/images/titlebar.png | Bin 1436 -> 0 bytes examples/quick/canvas/contents/images/titlebar.sci | 5 - .../quick/canvas/contents/images/toolbutton.png | Bin 2550 -> 0 bytes .../quick/canvas/contents/images/toolbutton.sci | 5 - .../canvas/quadraticCurveTo/quadraticCurveTo.qml | 158 ++++++++-------- examples/quick/canvas/roundedrect/roundedrect.qml | 142 +++++++------- examples/quick/canvas/smile/smile.qml | 149 +++++++-------- examples/quick/canvas/squircle/squircle.qml | 207 ++++++++++----------- examples/quick/canvas/tiger/tiger.qml | 146 ++++++++------- examples/quick/shared/Slider.qml | 117 ++++++++++++ examples/quick/shared/images/slider_handle.png | Bin 0 -> 887 bytes examples/quick/shared/qmldir | 1 + examples/quick/shared/shared.qrc | 2 + 29 files changed, 691 insertions(+), 1088 deletions(-) delete mode 100644 examples/quick/canvas/contents/Button.qml delete mode 100644 examples/quick/canvas/contents/ScrollBar.qml delete mode 100644 examples/quick/canvas/contents/Slider.qml delete mode 100644 examples/quick/canvas/contents/TitleBar.qml delete mode 100644 examples/quick/canvas/contents/ToolBar.qml delete mode 100644 examples/quick/canvas/contents/images/button-pressed.png delete mode 100644 examples/quick/canvas/contents/images/button.png delete mode 100644 examples/quick/canvas/contents/images/default.svg delete mode 100755 examples/quick/canvas/contents/images/gloss.png delete mode 100755 examples/quick/canvas/contents/images/lineedit.png delete mode 100644 examples/quick/canvas/contents/images/lineedit.sci delete mode 100755 examples/quick/canvas/contents/images/quit.png delete mode 100755 examples/quick/canvas/contents/images/stripes.png delete mode 100755 examples/quick/canvas/contents/images/titlebar.png delete mode 100644 examples/quick/canvas/contents/images/titlebar.sci delete mode 100755 examples/quick/canvas/contents/images/toolbutton.png delete mode 100644 examples/quick/canvas/contents/images/toolbutton.sci create mode 100644 examples/quick/shared/Slider.qml create mode 100644 examples/quick/shared/images/slider_handle.png (limited to 'examples') diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml index 386d1d73d3..281ca9399e 100644 --- a/examples/quick/canvas/bezierCurve/bezierCurve.qml +++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml @@ -40,84 +40,88 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Bezier Curve"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing:5 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - property string strokeStyle:"red" - property string fillStyle:"red" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Bezier Curve" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + Canvas { + id:canvas + width:320 + height:280 + property color strokeStyle: Qt.darker(fillStyle, 1.4) + property color fillStyle: "#b40000" // red + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real alpha: 1.0 + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value + antialiasing: true - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - //! [0] - ctx.beginPath(); - ctx.moveTo(75,40); - ctx.bezierCurveTo(75,37,70,25,50,25); - ctx.bezierCurveTo(20,25,20,62.5,20,62.5); - ctx.bezierCurveTo(20,80,40,102,75,120); - ctx.bezierCurveTo(110,102,130,80,130,62.5); - ctx.bezierCurveTo(130,62.5,130,25,100,25); - ctx.bezierCurveTo(85,25,75,37,75,40); - ctx.closePath(); - //! [0] - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 85 + var originY = 75 + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.globalAlpha = canvas.alpha; + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) + + //! [0] + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.closePath(); + //! [0] + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl; min: 1; max: 10; init: 2; name: "Outline"} + Slider {id: scaleCtrl; min: 0.1; max: 10; init: 1; name: "Scale"} + Slider {id: rotateCtrl; min: 0; max: Math.PI*2; init: 0; name: "Rotate"} + } } diff --git a/examples/quick/canvas/canvas.qrc b/examples/quick/canvas/canvas.qrc index 06d39f3624..cfdfc844b9 100644 --- a/examples/quick/canvas/canvas.qrc +++ b/examples/quick/canvas/canvas.qrc @@ -3,24 +3,7 @@ canvas.qml bezierCurve/bezierCurve.qml clip/clip.qml - contents/Button.qml contents/qt-logo.png - contents/ScrollBar.qml - contents/Slider.qml - contents/TitleBar.qml - contents/ToolBar.qml - contents/images/button-pressed.png - contents/images/button.png - contents/images/default.svg - contents/images/gloss.png - contents/images/lineedit.png - contents/images/lineedit.sci - contents/images/quit.png - contents/images/stripes.png - contents/images/titlebar.png - contents/images/titlebar.sci - contents/images/toolbutton.png - contents/images/toolbutton.sci quadraticCurveTo/quadraticCurveTo.qml roundedrect/roundedrect.qml smile/smile.qml diff --git a/examples/quick/canvas/clip/clip.qml b/examples/quick/canvas/clip/clip.qml index 1e9728ff8d..71def05d20 100644 --- a/examples/quick/canvas/clip/clip.qml +++ b/examples/quick/canvas/clip/clip.qml @@ -40,111 +40,109 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Makes squircle icon with clip"; anchors.horizontalCenter:parent.horizontalCenter} - Canvas { - id:canvas - width:320 - height:280 - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:2 - property int nSize:nCtrl.value - property real radius:rCtrl.value - property bool fill:true - property bool stroke:false - property real px:xCtrl.value - property real py:yCtrl.value - property real alpha:alphaCtrl.value - property string imagefile:"../contents/qt-logo.png" - antialiasing: true - Component.onCompleted:loadImage(canvas.imagefile); + Column { + spacing:5 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Squircle with Clip" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } + Canvas { + id: canvas + width: 320 + height: 280 + property color strokeStyle: Qt.darker(fillStyle, 1.2) + property color fillStyle:"#14aaff" // green + property int lineWidth:2 + property int nSize:nCtrl.value + property real radius:rCtrl.value + property bool fill:true + property bool stroke:false + property real px: width/2 + property real py: height/2 + 20 + property real alpha: 1.0 + property string imagefile:"../contents/qt-logo.png" + antialiasing: true + Component.onCompleted:loadImage(canvas.imagefile); - onAlphaChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onLineWidthChanged:requestPaint(); - onNSizeChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onPxChanged:requestPaint(); - onPyChanged:requestPaint(); - - onImageLoaded : requestPaint(); + onRadiusChanged:requestPaint(); + onLineWidthChanged:requestPaint(); + onNSizeChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onImageLoaded : requestPaint(); + onPaint: squcirle(); - onPaint: squcirle(); + function squcirle() { + var ctx = canvas.getContext("2d"); + var N = canvas.nSize; + var R = canvas.radius; - function squcirle() { - var ctx = canvas.getContext("2d"); - var N = canvas.nSize; - var R = canvas.radius; + N=Math.abs(N); + var M=N; + if (N>100) M=100; + if (N<0.00000000001) M=0.00000000001; - N=Math.abs(N); - var M=N; - if (N>100) M=100; - if (N<0.00000000001) M=0.00000000001; + ctx.save(); + ctx.globalAlpha = canvas.alpha; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.save(); - ctx.globalAlpha =canvas.alpha; - ctx.fillStyle = "gray"; - ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; + ctx.beginPath(); + var i = 0, x, y; + for (i=0; i<(2*R+1); i++){ + x = Math.round(i-R) + canvas.px; + y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; - ctx.beginPath(); - var i = 0, x, y; - for (i=0; i<(2*R+1); i++){ - x = Math.round(i-R) + canvas.px; - y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; + if (i == 0) + ctx.moveTo(x, y); + else + ctx.lineTo(x, y); + } - if (i == 0) - ctx.moveTo(x, y); - else - ctx.lineTo(x, y); - } + for (i=(2*R); i<(4*R+1); i++){ + x =Math.round(3*R-i)+canvas.px; + y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; + ctx.lineTo(x, y); + } + ctx.closePath(); + if (canvas.stroke) { + ctx.stroke(); + } - for (i=(2*R); i<(4*R+1); i++){ - x =Math.round(3*R-i)+canvas.px; - y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; - ctx.lineTo(x, y); - } - ctx.closePath(); - if (canvas.stroke) { - ctx.stroke(); - } + if (canvas.fill) { + ctx.fill(); + } - if (canvas.fill) { - ctx.fill(); - } - //! [0] - ctx.clip(); + //! [0] + ctx.clip(); + ctx.drawImage(canvas.imagefile, 0, 0); + //! [0] - ctx.drawImage(canvas.imagefile, 0, 0); - //! [0] - ctx.restore(); - } - } - - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"} - Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"} - Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"} - Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: nCtrl; min: 1; max: 10; init: 4; name:"N"} + Slider {id: rCtrl; min: 30; max: 180; init: 80; name:"Radius"} + } } diff --git a/examples/quick/canvas/contents/Button.qml b/examples/quick/canvas/contents/Button.qml deleted file mode 100644 index efdf4eae76..0000000000 --- a/examples/quick/canvas/contents/Button.qml +++ /dev/null @@ -1,87 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/legal -** -** This file is part of the examples of the Qt Toolkit. -** -** $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 - -Item { - id: container - - signal clicked - - property string text - width: buttonText.width + 28 - height: buttonText.height + 14 - - BorderImage { - id: buttonImage - source: "images/toolbutton.sci" - width: container.width - 10 - height: container.height - } - BorderImage { - id: pressed - opacity: 0 - source: "images/toolbutton.sci" - width: container.width - 10 - height: container.height - } - MouseArea { - id: mouseRegion - anchors.fill: buttonImage - onClicked: { container.clicked(); } - } - Text { - id: buttonText - color: "white" - anchors.centerIn: buttonImage - font.bold: true - font.pointSize: 15 - text: container.text - style: Text.Raised - styleColor: "black" - } - states: [ - State { - name: "Pressed" - when: mouseRegion.pressed == true - PropertyChanges { target: pressed; opacity: 1 } - } - ] -} diff --git a/examples/quick/canvas/contents/ScrollBar.qml b/examples/quick/canvas/contents/ScrollBar.qml deleted file mode 100644 index 2c51e0fc48..0000000000 --- a/examples/quick/canvas/contents/ScrollBar.qml +++ /dev/null @@ -1,74 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/legal -** -** This file is part of the Qt Mobility Components. -** -** $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 - -Item { - id: scrollBar - // The properties that define the scrollbar's state. - // position and pageSize are in the range 0.0 - 1.0. They are relative to the - // height of the page, i.e. a pageSize of 0.5 means that you can see 50% - // of the height of the view. - // orientation can be either 'Vertical' or 'Horizontal' - property real position - property real pageSize - property string orientation : "Vertical" - property alias bgColor: background.color - property alias fgColor: thumb.color - - // A light, semi-transparent background - Rectangle { - id: background - radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) - color: "white"; opacity: 0.3 - anchors.fill: parent - } - // Size the bar to the required size, depending upon the orientation. - Rectangle { - id: thumb - opacity: 0.7 - color: "black" - radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) - x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) - y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 - width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) - height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) - } -} diff --git a/examples/quick/canvas/contents/Slider.qml b/examples/quick/canvas/contents/Slider.qml deleted file mode 100644 index e0fed95ee8..0000000000 --- a/examples/quick/canvas/contents/Slider.qml +++ /dev/null @@ -1,115 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/legal -** -** This file is part of the QtQuick module of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:LGPL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and Digia. For licensing terms and -** conditions see http://qt.digia.com/licensing. For further information -** use the contact form at http://qt.digia.com/contact-us. -** -** GNU Lesser General Public License Usage -** Alternatively, this file may be used under the terms of the GNU Lesser -** General Public License version 2.1 as published by the Free Software -** Foundation and appearing in the file LICENSE.LGPL included in the -** packaging of this file. Please review the following information to -** ensure the GNU Lesser General Public License version 2.1 requirements -** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. -** -** In addition, as a special exception, Digia gives you certain additional -** rights. These rights are described in the Digia Qt LGPL Exception -** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3.0 as published by the Free Software -** Foundation and appearing in the file LICENSE.GPL included in the -** packaging of this file. Please review the following information to -** ensure the GNU General Public License version 3.0 requirements will be -** met: http://www.gnu.org/copyleft/gpl.html. -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -import QtQuick 2.0 - -Item { - id:slider - property real min:0 - property real max:1 - property real value: min + (max - min) * (bar.x / (foo.width - bar.width)) - property real init:min+(max-min)/2 - property string name:"Slider" - - Component.onCompleted: setValue(init) - function setValue(v) { - if (min < max) - bar.x = v/(max - min) * (foo.width - bar.width); - } - Rectangle { - id:sliderName - anchors.left:parent.left - height: childrenRect.height - width:childrenRect.width - anchors.verticalCenter:parent.verticalCenter - Text { - text:slider.name - font.pointSize:12 - } - } - Item { - id: foo - height: 6 - width: parent.width - 4 - sliderName.width - anchors.verticalCenter:parent.verticalCenter - anchors.left:sliderName.right - anchors.leftMargin:5 - Rectangle { - height: parent.height - anchors.left: parent.left - anchors.right: bar.horizontalCenter - color: "blue" - radius: 3 - } - Rectangle { - height: parent.height - anchors.left: bar.horizontalCenter - anchors.right: parent.right - color: "gray" - radius: 3 - } - Rectangle { - anchors.fill: parent - color: "transparent" - radius: 3 - border.width: 2 - border.color: "black" - } - - Rectangle { - id: bar - y: -7 - width: 20 - height: 20 - radius: 15 - color: "white" - border.width: 2 - border.color: "black" - MouseArea { - anchors.fill: parent - drag.target: parent - drag.axis: Drag.XAxis - drag.minimumX: 0 - drag.maximumX: foo.width - parent.width - } - } - } -} diff --git a/examples/quick/canvas/contents/TitleBar.qml b/examples/quick/canvas/contents/TitleBar.qml deleted file mode 100644 index 1698a2a98a..0000000000 --- a/examples/quick/canvas/contents/TitleBar.qml +++ /dev/null @@ -1,70 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/legal -** -** This file is part of the examples of the Qt Toolkit. -** -** $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 - -Item { - id: titleBar - property string title: "" - - BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } - - Image { - id: quitButton - anchors.left: parent.left//; anchors.leftMargin: 0 - anchors.verticalCenter: parent.verticalCenter - source: "images/quit.png" - MouseArea { - anchors.fill: parent - onClicked: Qt.quit() - } - } - - Text { - id: categoryText - anchors { - left: quitButton.right; right: parent.right; //leftMargin: 10; rightMargin: 10 - verticalCenter: parent.verticalCenter - } - elide: Text.ElideLeft - text: title - font.bold: true; font.pointSize: 20; color: "White"; style: Text.Raised; styleColor: "Black" - } -} diff --git a/examples/quick/canvas/contents/ToolBar.qml b/examples/quick/canvas/contents/ToolBar.qml deleted file mode 100644 index 005a6b144e..0000000000 --- a/examples/quick/canvas/contents/ToolBar.qml +++ /dev/null @@ -1,69 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/legal -** -** This file is part of the examples of the Qt Toolkit. -** -** $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 - -Item { - id: toolbar - - property variant labels - signal buttonClicked(int index) - - BorderImage { - source: "images/titlebar.sci" - width: parent.width - height: parent.height + 14 - y: -7 - } - - Row { - y: 3 - anchors.horizontalCenter: parent.horizontalCenter - Repeater { - model: toolbar.labels - delegate: - Button { - text: modelData - onClicked: toolbar.buttonClicked(model.index) - } - } - } - -} diff --git a/examples/quick/canvas/contents/images/button-pressed.png b/examples/quick/canvas/contents/images/button-pressed.png deleted file mode 100644 index e434d327f2..0000000000 Binary files a/examples/quick/canvas/contents/images/button-pressed.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/button.png b/examples/quick/canvas/contents/images/button.png deleted file mode 100644 index 56a63ce641..0000000000 Binary files a/examples/quick/canvas/contents/images/button.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/default.svg b/examples/quick/canvas/contents/images/default.svg deleted file mode 100644 index 248199cc4e..0000000000 --- a/examples/quick/canvas/contents/images/default.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - weather-clear - January 2006 - - - Ryan Collier (pseudo) - - - - - http://www.tango-project.org - - - http://www.pseudocode.org - - - weather - applet - notification - - - - - - Garrett LeSage - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/quick/canvas/contents/images/gloss.png b/examples/quick/canvas/contents/images/gloss.png deleted file mode 100755 index 5d370cd93d..0000000000 Binary files a/examples/quick/canvas/contents/images/gloss.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/lineedit.png b/examples/quick/canvas/contents/images/lineedit.png deleted file mode 100755 index 2cc38dc35b..0000000000 Binary files a/examples/quick/canvas/contents/images/lineedit.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/lineedit.sci b/examples/quick/canvas/contents/images/lineedit.sci deleted file mode 100644 index 054bff78be..0000000000 --- a/examples/quick/canvas/contents/images/lineedit.sci +++ /dev/null @@ -1,5 +0,0 @@ -border.left: 10 -border.top: 10 -border.bottom: 10 -border.right: 10 -source: lineedit.png diff --git a/examples/quick/canvas/contents/images/quit.png b/examples/quick/canvas/contents/images/quit.png deleted file mode 100755 index 5bda1b6e0d..0000000000 Binary files a/examples/quick/canvas/contents/images/quit.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/stripes.png b/examples/quick/canvas/contents/images/stripes.png deleted file mode 100755 index 9f36727ea4..0000000000 Binary files a/examples/quick/canvas/contents/images/stripes.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/titlebar.png b/examples/quick/canvas/contents/images/titlebar.png deleted file mode 100755 index 51c90082d0..0000000000 Binary files a/examples/quick/canvas/contents/images/titlebar.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/titlebar.sci b/examples/quick/canvas/contents/images/titlebar.sci deleted file mode 100644 index 0418d94cd6..0000000000 --- a/examples/quick/canvas/contents/images/titlebar.sci +++ /dev/null @@ -1,5 +0,0 @@ -border.left: 10 -border.top: 12 -border.bottom: 12 -border.right: 10 -source: titlebar.png diff --git a/examples/quick/canvas/contents/images/toolbutton.png b/examples/quick/canvas/contents/images/toolbutton.png deleted file mode 100755 index 11310013ee..0000000000 Binary files a/examples/quick/canvas/contents/images/toolbutton.png and /dev/null differ diff --git a/examples/quick/canvas/contents/images/toolbutton.sci b/examples/quick/canvas/contents/images/toolbutton.sci deleted file mode 100644 index 9e4f965307..0000000000 --- a/examples/quick/canvas/contents/images/toolbutton.sci +++ /dev/null @@ -1,5 +0,0 @@ -border.left: 15 -border.top: 4 -border.bottom: 4 -border.right: 15 -source: toolbutton.png diff --git a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml index 9e03c03b98..0756d339ff 100644 --- a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml +++ b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml @@ -40,91 +40,97 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width:320 + height:480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Quadratic Curve"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing:5 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - property string strokeStyle:"steelblue" - property string fillStyle:"yellow" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Quadratic Curve" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + Canvas { + id: canvas + width: 320 + height: 280 - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - // ![0] - ctx.beginPath(); - ctx.moveTo(75,25); - ctx.quadraticCurveTo(25,25,25,62.5); - ctx.quadraticCurveTo(25,100,50,100); - ctx.quadraticCurveTo(50,120,30,125); - ctx.quadraticCurveTo(60,120,65,100); - ctx.quadraticCurveTo(125,100,125,62.5); - ctx.quadraticCurveTo(125,25,75,25); - ctx.closePath(); - // ![0] - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); + property color strokeStyle: Qt.darker(fillStyle, 1.3) + property color fillStyle: "#14aaff" // blue + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real alpha: 1.0 + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value + antialiasing: true - // ![1] - ctx.fillStyle="green"; - ctx.font = "Bold 15px"; + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - ctx.fillText("QML酷毙了", 30, 60); - // ![1] - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 75 + var originY = 75 + + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.translate(originX, originY) + ctx.rotate(canvas.rotate); + ctx.scale(canvas.scale, canvas.scale); + ctx.translate(-originX, -originY) - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + // ![0] + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.closePath(); + // ![0] + + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + + ctx.restore(); + + // ![1] + ctx.fillStyle = "white"; + ctx.font = "Bold 17px"; + ctx.fillText("Qt Quick", 110, 140); + // ![1] + } } } - } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id:lineWidthCtrl; min:1; max:10; init:2; name:"Outline"} + Slider {id:scaleCtrl; min:0.1; max:10; init:1; name:"Scale"} + Slider {id:rotateCtrl; min:0; max:Math.PI*2; init:0; name:"Rotate"} + } } diff --git a/examples/quick/canvas/roundedrect/roundedrect.qml b/examples/quick/canvas/roundedrect/roundedrect.qml index 42142cef19..5a0a77425a 100644 --- a/examples/quick/canvas/roundedrect/roundedrect.qml +++ b/examples/quick/canvas/roundedrect/roundedrect.qml @@ -40,84 +40,82 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Rounded rectangle"; anchors.horizontalCenter:parent.horizontalCenter} - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Rounded rectangle" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } + Canvas { + id: canvas + width: 320 + height: 280 + antialiasing: true - property int radius: rCtrl.value - property int rectx: rxCtrl.value - property int recty: ryCtrl.value - property int rectWidth: width - 2*rectx - property int rectHeight: height - 2*recty - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value + property int radius: rCtrl.value + property int rectx: 60 + property int recty: 60 + property int rectWidth: width - 2*rectx + property int rectHeight: height - 2*recty + property color strokeStyle: Qt.darker(fillStyle, 1.4) + property color fillStyle: "#ae32a0" // purple + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real alpha: 1.0 - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onRectxChanged:requestPaint(); - onRectyChanged:requestPaint(); - onAlphaChanged:requestPaint(); + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onRadiusChanged:requestPaint(); - onPaint: { - var ctx = getContext("2d"); - ctx.save(); - ctx.clearRect(0,0,canvas.width, canvas.height); - ctx.strokeStyle = canvas.strokeStyle; - ctx.lineWidth = canvas.lineWidth - ctx.fillStyle = canvas.fillStyle - ctx.globalAlpha = canvas.alpha - ctx.beginPath(); - ctx.moveTo(rectx+radius,recty); // top side - ctx.lineTo(rectx+rectWidth-radius,recty); - // draw top right corner - ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius); - ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side - // draw bottom right corner - ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius); - ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side - // draw bottom left corner - ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius); - ctx.lineTo(rectx,recty+radius); // left side - // draw top left corner - ctx.arcTo(rectx,recty,rectx+radius,recty,radius); - ctx.closePath(); - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); + onPaint: { + var ctx = getContext("2d"); + ctx.save(); + ctx.clearRect(0,0,canvas.width, canvas.height); + ctx.strokeStyle = canvas.strokeStyle; + ctx.lineWidth = canvas.lineWidth + ctx.fillStyle = canvas.fillStyle + ctx.globalAlpha = canvas.alpha + ctx.beginPath(); + ctx.moveTo(rectx+radius,recty); // top side + ctx.lineTo(rectx+rectWidth-radius,recty); + // draw top right corner + ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius); + ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side + // draw bottom right corner + ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius); + ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side + // draw bottom left corner + ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius); + ctx.lineTo(rectx,recty+radius); // left side + // draw top left corner + ctx.arcTo(rectx,recty,rectx+radius,recty,radius); + ctx.closePath(); + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:rxCtrl; width:300; height:20; min:5; max:30; init:10; name:"rectx"} - Slider {id:ryCtrl; width:300; height:20; min:5; max:30; init:10; name:"recty"} - Slider {id:rCtrl; width:300; height:20; min:10; max:100; init:40; name:"Radius"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} - } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"} + Slider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"} } - } } diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml index c8b01b305a..0251b1b101 100644 --- a/examples/quick/canvas/smile/smile.qml +++ b/examples/quick/canvas/smile/smile.qml @@ -40,87 +40,90 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id: container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Smile with arcs" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - property string strokeStyle:"green" - property string fillStyle:"yellow" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value + Canvas { + id: canvas + width: 320 + height: parent.height - controls.height + antialiasing: true - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); + property color strokeStyle: Qt.darker(fillStyle, 1.6) + property color fillStyle: "#e0c31e" // yellow + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - ctx.beginPath(); - ctx.moveTo(75 + 50 * Math.cos(0), - 75 - 50 * Math.sin(Math.PI*2)); - ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle - ctx.moveTo(75,70); - ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) - ctx.moveTo(60,65); - ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye - ctx.moveTo(90 + 5 * Math.cos(0), - 65 - 5 * Math.sin(Math.PI*2)); - ctx.moveTo(90,65); - ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye - ctx.closePath(); - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 85 + var originY = 75 + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.globalAlpha = canvas.alpha; + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + ctx.beginPath(); + ctx.moveTo(75 + 50 * Math.cos(0), + 75 - 50 * Math.sin(Math.PI*2)); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(75,70); + ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) + ctx.moveTo(60,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(90 + 5 * Math.cos(0), + 65 - 5 * Math.sin(Math.PI*2)); + ctx.moveTo(90,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.closePath(); + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"} + Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"} + Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"} + } } diff --git a/examples/quick/canvas/squircle/squircle.qml b/examples/quick/canvas/squircle/squircle.qml index 3044816479..4e5c5a49fc 100644 --- a/examples/quick/canvas/squircle/squircle.qml +++ b/examples/quick/canvas/squircle/squircle.qml @@ -40,114 +40,111 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 - - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Squircles"; anchors.horizontalCenter:parent.horizontalCenter} - Image { - anchors.horizontalCenter:parent.horizontalCenter - source:"squircle.png" - width:250 - height:25 - } - Canvas { - id:canvas - width:320 - height:250 - antialiasing: true - - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:2 - property int nSize:nCtrl.value - property real radius:rCtrl.value - property bool fill:true - property bool stroke:false - property real px:xCtrl.value - property real py:yCtrl.value - property real alpha:alphaCtrl.value - - onAlphaChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onLineWidthChanged:requestPaint(); - onNSizeChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onPxChanged:requestPaint(); - onPyChanged:requestPaint(); - - - onPaint: squcirle(); - - function squcirle() { - var ctx = canvas.getContext("2d"); - var N = canvas.nSize; - var R = canvas.radius; - - N=Math.abs(N); - var M=N; - if (N>100) M=100; - if (N<0.00000000001) M=0.00000000001; - - ctx.save(); - ctx.globalAlpha =canvas.alpha; - ctx.fillStyle = "gray"; - ctx.fillRect(0, 0, canvas.width, canvas.height); - - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - - ctx.beginPath(); - var i = 0, x, y; - for (i=0; i<(2*R+1); i++){ - x = Math.round(i-R) + canvas.px; - y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; - - if (i == 0) - ctx.moveTo(x, y); - else - ctx.lineTo(x, y); - } - - for (i=(2*R); i<(4*R+1); i++){ - x =Math.round(3*R-i)+canvas.px; - y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; - ctx.lineTo(x, y); - } - ctx.closePath(); - if (canvas.stroke) { - ctx.stroke(); - } - - if (canvas.fill) { - ctx.fill(); - } - - ctx.fillStyle = "yellow"; - ctx.font = "Helvetica 16px"; - ctx.fillText("|X-" + Math.round(canvas.px) + "|^" + N + " + |Y-"+Math.round(canvas.py)+"|^" + N + " = |" + Math.round(R) + "|^" + N, canvas.px - 125, canvas.py); - ctx.restore(); + id: container + width: 320 + height: 480 + + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Squircles" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" } - } - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"} - Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"} - Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"} - Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "squircle.png" + width: 250 + height: 25 } + + Canvas { + id: canvas + width: 320 + height: 250 + antialiasing: true + + property color strokeStyle: Qt.darker(fillStyle, 1.2) + property color fillStyle: "#6400aa" + + property int lineWidth: 2 + property int nSize: nCtrl.value + property real radius: rCtrl.value + property bool fill: true + property bool stroke: false + property real px: width/2 + property real py: height/2 + 10 + property real alpha: 1.0 + + onRadiusChanged: requestPaint(); + onLineWidthChanged: requestPaint(); + onNSizeChanged: requestPaint(); + onFillChanged: requestPaint(); + onStrokeChanged: requestPaint(); + + onPaint: squcirle(); + + function squcirle() { + var ctx = canvas.getContext("2d"); + var N = canvas.nSize; + var R = canvas.radius; + + N=Math.abs(N); + var M=N; + if (N>100) M=100; + if (N<0.00000000001) M=0.00000000001; + + ctx.save(); + ctx.globalAlpha =canvas.alpha; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.beginPath(); + var i = 0, x, y; + for (i=0; i<(2*R+1); i++){ + x = Math.round(i-R) + canvas.px; + y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; + + if (i == 0) + ctx.moveTo(x, y); + else + ctx.lineTo(x, y); + } + + for (i=(2*R); i<(4*R+1); i++){ + x =Math.round(3*R-i)+canvas.px; + y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; + ctx.lineTo(x, y); + } + ctx.closePath(); + if (canvas.stroke) { + ctx.stroke(); + } + + if (canvas.fill) { + ctx.fill(); + } + ctx.restore(); + } + } + + } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: nCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "N"} + Slider {id: rCtrl ; min: 30 ; max: 180 ; init: 60 ; name: "Radius"} } - } } diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml index 8b629eecf3..94a7d2dc3d 100644 --- a/examples/quick/canvas/tiger/tiger.qml +++ b/examples/quick/canvas/tiger/tiger.qml @@ -40,89 +40,95 @@ import QtQuick 2.0 import "../contents" +import "../../shared" import "tiger.js" as Tiger + Item { - id:container - width:320 - height:480 + id: container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Tiger with SVG path"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true - property string strokeStyle:"steelblue" - property string fillStyle:"yellow" - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - property int frame:0 + Text { + font.pointSize: 24 + font.bold: true + text: "Tiger with SVG path" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - onFillChanged: requestPaint(); - onStrokeChanged: requestPaint(); - onAlphaChanged: requestPaint(); - onScaleXChanged: requestPaint(); - onScaleYChanged: requestPaint(); - onRotateChanged: requestPaint(); + Canvas { + id: canvas + width: 320 + height: 280 + antialiasing: true - onPainted : { - canvas.frame++; - if (canvas.frame < Tiger.tiger.length) - requestPaint(); - } - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - ctx.globalCompositeOperation = "source-over"; - ctx.translate(canvas.width/2, canvas.height/2); - ctx.strokeStyle = Qt.rgba(.3, .3, .3,1); - ctx.lineWidth = 1; + property string strokeStyle: "steelblue" + property string fillStyle: "yellow" + property bool fill: true + property bool stroke: true + property real alpha: alphaCtrl.value + property real scale: scaleCtrl.value + property real rotate: rotateCtrl.value + property int frame: 0 - //! [0] - for (var i = 0; i < canvas.frame && i < Tiger.tiger.length; i++) { - if (Tiger.tiger[i].width != undefined) - ctx.lineWidth = Tiger.tiger[i].width; + onFillChanged: requestPaint(); + onStrokeChanged: requestPaint(); + onAlphaChanged: requestPaint(); + onScaleChanged: requestPaint(); + onRotateChanged: requestPaint(); - if (Tiger.tiger[i].path != undefined) - ctx.path = Tiger.tiger[i].path; + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = canvas.width/2 + 30 + var originY = canvas.height/2 + 60 - if (Tiger.tiger[i].fill != undefined) { - ctx.fillStyle = Tiger.tiger[i].fill; - ctx.fill(); - } + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.globalAlpha = canvas.alpha; + ctx.globalCompositeOperation = "source-over"; + + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) - if (Tiger.tiger[i].stroke != undefined) { - ctx.strokeStyle = Tiger.tiger[i].stroke; - ctx.stroke(); + ctx.strokeStyle = Qt.rgba(.3, .3, .3,1); + ctx.lineWidth = 1; + + //! [0] + for (var i = 0; i < Tiger.tiger.length; i++) { + if (Tiger.tiger[i].width != undefined) + ctx.lineWidth = Tiger.tiger[i].width; + + if (Tiger.tiger[i].path != undefined) + ctx.path = Tiger.tiger[i].path; + + if (Tiger.tiger[i].fill != undefined) { + ctx.fillStyle = Tiger.tiger[i].fill; + ctx.fill(); + } + + if (Tiger.tiger[i].stroke != undefined) { + ctx.strokeStyle = Tiger.tiger[i].stroke; + ctx.stroke(); + } } + //! [0] + ctx.restore(); } - //! [0] - ctx.restore(); } } - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"} + Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"} + Slider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"} } - } } diff --git a/examples/quick/shared/Slider.qml b/examples/quick/shared/Slider.qml new file mode 100644 index 0000000000..d310a25bd5 --- /dev/null +++ b/examples/quick/shared/Slider.qml @@ -0,0 +1,117 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the QtQuick module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: slider + height: 26 + width: 320 + + property real min: 0 + property real max: 1 + property real value: min + (max - min) * mousearea.value + property real init: min+(max-min)/2 + property string name: "Slider" + property color color: "#0066cc" + + Component.onCompleted: setValue(init) + function setValue(v) { + if (min < max) + handle.x = Math.round( v / (max - min) * + (mousearea.drag.maximumX - mousearea.drag.minimumX) + + mousearea.drag.minimumX); + } + Rectangle { + id:sliderName + anchors.left: parent.left + anchors.leftMargin: 16 + height: childrenRect.height + width: Math.max(44, childrenRect.width) + anchors.verticalCenter: parent.verticalCenter + Text { + text: slider.name + ":" + font.pointSize: 12 + color: "#333" + } + } + + Rectangle{ + id: foo + width: parent.width - 8 - sliderName.width + color: "#eee" + height: 7 + radius: 3 + antialiasing: true + border.color: Qt.darker(color, 1.2) + anchors.left: sliderName.right + anchors.right: parent.right + anchors.leftMargin: 10 + anchors.rightMargin: 24 + anchors.verticalCenter: parent.verticalCenter + + Rectangle { + height: parent.height + anchors.left: parent.left + anchors.right: handle.horizontalCenter + color: slider.color + radius: 3 + border.width: 1 + border.color: Qt.darker(color, 1.3) + opacity: 0.8 + } + Image { + id: handle + source: "images/slider_handle.png" + anchors.verticalCenter: parent.verticalCenter + MouseArea { + id: mousearea + anchors.fill: parent + anchors.margins: -4 + drag.target: parent + drag.axis: Drag.XAxis + drag.minimumX: Math.round(-handle.width / 2 + 3) + drag.maximumX: Math.round(foo.width - handle.width/2 - 3) + property real value: (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX) + } + } + } +} diff --git a/examples/quick/shared/images/slider_handle.png b/examples/quick/shared/images/slider_handle.png new file mode 100644 index 0000000000..63c518be7d Binary files /dev/null and b/examples/quick/shared/images/slider_handle.png differ diff --git a/examples/quick/shared/qmldir b/examples/quick/shared/qmldir index 2f1e56aefb..106654bbf0 100644 --- a/examples/quick/shared/qmldir +++ b/examples/quick/shared/qmldir @@ -1,3 +1,4 @@ Button 2.0 Button.qml LauncherList 2.0 LauncherList.qml SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml +Slider 2.0 Slider.qml diff --git a/examples/quick/shared/shared.qrc b/examples/quick/shared/shared.qrc index 0c9f39e7b0..fba2d3eb82 100644 --- a/examples/quick/shared/shared.qrc +++ b/examples/quick/shared/shared.qrc @@ -3,6 +3,8 @@ LauncherList.qml SimpleLauncherDelegate.qml Button.qml + Slider.qml + images/slider_handle.png images/back.png images/next.png -- cgit v1.2.3