From f289fdc53e85bf0f2002070fa883f5c01bae1232 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Sun, 24 Feb 2013 15:47:38 +0100 Subject: [PATCH] Various improvements to Canvas examples MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 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 diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml index 386d1d7..281ca93 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 06d39f3..cfdfc84 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 1e9728f..71def05 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 efdf4ea..0000000 --- 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 2c51e0f..0000000 --- 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 e0fed95..0000000 --- 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 1698a2a..0000000 --- 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 005a6b1..0000000 --- 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 e434d327f21e98e82676485da0d7b93aa672cf96..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 571 zcmV-B0>u4^P)Px#0%A)?L;(MXkIcUS000SaNLh0L01pxX01pxYA)E3u00007bV*G`2iXG>7A_$h zki;_p000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}0004+Nkl8S{5C!0G?%wPst7rwG;Y}jM8;}<9n5k$&foORFdL#-$!OsS5vVXo5>;1D5L=p;n zDqD9(KIiz1XB?M`D?j}5Wh2d*qp8=iZuHs%mcSj)@DL`7G1-&cxKR^`==xws7IKN`@;_ON*9*ZA!U7 zHkTw=witTT$RRAv>vzz4o7~-pNk=2P48FEa7$~)ix)BEsww@oZFFK?6p;%+?t6KcE zxea`OYn#5(Df4FoX{~&_JGc5^&wn z1&`^6ctCbYilUOJe^EnH31J}1%$<5)v)lrYN2~ommf_eazpH=p!o;!MH+Lrc=vNEi z-nGlGfEO&CIQ7amBXMa=InwLQn5xW7h^I0mH*wvueRAj!e*leMdaFm*MwkEq002ov JPDHLkV1m>V_W1w+ diff --git a/examples/quick/canvas/contents/images/button.png b/examples/quick/canvas/contents/images/button.png deleted file mode 100644 index 56a63ce64168c8e9068da449c584f52bf221f052..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 564 zcmV-40?Yl0P)Px#0%A)?L;(MXkIcUS000SaNLh0L01pxX01pxYA)E3u00007bV*G`2iXG>1uYVh z4eQSU000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}0004#Nkl%$cz^@kX$p1UjTX3V7)P{s;fxK}M~>(~$41h+s~uIsh708A@FoAHt! z-hQW>v+g-5p*Mr7+qY9Kq0pK2^Y%L}JH}=Uc5xwHp<9RZ`mO|8%f?;!-KIgv$yj*= zUFlx~t>&jmM^Ry7GbI%R>(YyyeaztkIh^7I?pQ)K)03ax+pP2a8~u*cQ_kOIR~N0Qdgr`>IzdelzWHK7UKhr$TS&|?hx`KQ(d_C%`_IAv0000 - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 5d370cd93d62ed8c17f43a5d5dc7ed20b4edb5a1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1236 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 VqK)QbrHcRn002ovPDHLkV1mrKo*@7L diff --git a/examples/quick/canvas/contents/images/lineedit.sci b/examples/quick/canvas/contents/images/lineedit.sci deleted file mode 100644 index 054bff7..0000000 --- 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 5bda1b6e0d0effbabf53172040f0ed2eea78e34a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2369 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 diff --git a/examples/quick/canvas/contents/images/stripes.png b/examples/quick/canvas/contents/images/stripes.png deleted file mode 100755 index 9f36727ea424cd0da94bd5a7cee4082447275eeb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 257 zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqjKx9jP7LeL$-D$|*pj^6T^Rm@ z;DWu&Cj&(|3p^r=85p>QL70(Y)*K0-AbW|YuPgga4pBxq@gGdLS%5-~o-U3d5|`(m z-N<{$K*aT;^vADLPxXoJET5>DG2xP-Q1*siVN6aag0$kQzm$|0%E+I; z#Y!4I)=g1)z4*}Q$iB}`v_QR diff --git a/examples/quick/canvas/contents/images/titlebar.png b/examples/quick/canvas/contents/images/titlebar.png deleted file mode 100755 index 51c90082d052a94af34488ca9a13842122f7d7a4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1436 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 M07*qoM6N<$g3{N*E&u=k diff --git a/examples/quick/canvas/contents/images/toolbutton.sci b/examples/quick/canvas/contents/images/toolbutton.sci deleted file mode 100644 index 9e4f965..0000000 --- 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 9e03c03..0756d33 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 42142ce..5a0a774 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 c8b01b3..0251b1b 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 3044816..4e5c5a4 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 8b629ee..94a7d2d 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 0000000..d310a25 --- /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 0000000000000000000000000000000000000000..63c518be7d7669e474dd119cce67a6bb9ee5aebe GIT binary patch literal 887 zcmV--1Bm>IP)^@R7efIRy|BwQ4|KG(NIML6bOUJW=zu%lLnWj-Mce%XpEs7 zofx`xVQM04CpH&{cI?)r8!m(d0wx$00*TU!{3NzSd9UAh``-2W`sAlJp5)}-$GzYA z?)lz%=VDh?)plRzxGy5|I432u!?eBnXoL!RpwdX0>|@q#8VL!EZY1KIB+_pq9Z3cv z%1jdTs1r*9>`^pAF@lie4YQQdkPS)bGw|7kg@r&Ok$Aqmyu7x!xcI2s?S8M<>*Z`V z`>o&apJLAdK7=cp>P+%lTF%Xm%_QJKX5kN`(dg5iot;nBYW3&Y*_nENey+CLZ87qh zzjHkni#_3f4M)7g7<(MiJTiG*sZ_coXf~Vb;o%{JOXo9x=X$AB>c->oHz1j}BE0d= zH2HMd9su}idwcsMe*+fs4vzd`YH-5@pV++t}E6d2w+uQaUSo76fs`GYz}Ds}6_5HXQQZPH)5!9}b7tfF_wROES0H z?WY`fG2)k&mVAgYl1%OOdM%dnU5xlnr}G0be{zU#r#1 zKua?Dov}2r!01j?Q8=H^7hEpa94l*D1CAB>Ykhq^ik?{mUVLlj%y!LRdY{Q^#3pHwgq2CB%=8;K^~%c1D*GM_;Q07>-|D6YM##r^g}E?GGP(Gl|AUMq zBdH-vJzI`u)2moko_PbG$CBwFjZ|Rt-wdOW$|#v(O-?5!lZZP^egl0~I52ng?(P5p N002ovPDHLkV1g6$qHh2I literal 0 HcmV?d00001 diff --git a/examples/quick/shared/qmldir b/examples/quick/shared/qmldir index 2f1e56a..106654b 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 0c9f39e..fba2d3e 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 -- 1.7.2.5