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"}
+ }
}
<file>canvas.qml</file>
<file>bezierCurve/bezierCurve.qml</file>
<file>clip/clip.qml</file>
- <file>contents/Button.qml</file>
<file>contents/qt-logo.png</file>
- <file>contents/ScrollBar.qml</file>
- <file>contents/Slider.qml</file>
- <file>contents/TitleBar.qml</file>
- <file>contents/ToolBar.qml</file>
- <file>contents/images/button-pressed.png</file>
- <file>contents/images/button.png</file>
- <file>contents/images/default.svg</file>
- <file>contents/images/gloss.png</file>
- <file>contents/images/lineedit.png</file>
- <file>contents/images/lineedit.sci</file>
- <file>contents/images/quit.png</file>
- <file>contents/images/stripes.png</file>
- <file>contents/images/titlebar.png</file>
- <file>contents/images/titlebar.sci</file>
- <file>contents/images/toolbutton.png</file>
- <file>contents/images/toolbutton.sci</file>
<file>quadraticCurveTo/quadraticCurveTo.qml</file>
<file>roundedrect/roundedrect.qml</file>
<file>smile/smile.qml</file>
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"}
+ }
}
+++ /dev/null
-/****************************************************************************
-**
-** 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 }
- }
- ]
-}
+++ /dev/null
-/****************************************************************************
-**
-** 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)
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** 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"
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** 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)
- }
- }
- }
-
-}
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" id="svg1306">
- <defs id="defs1308">
- <linearGradient id="linearGradient4083">
- <stop id="stop4085" offset="0" stop-color="#ffffff" stop-opacity="0"/>
- <stop offset="0.75" id="stop4089" stop-color="#ffffff" stop-opacity="0"/>
- <stop id="stop4087" offset="1" stop-color="#ffffff" stop-opacity="1"/>
- </linearGradient>
- <linearGradient id="linearGradient4032">
- <stop id="stop4034" offset="0" stop-color="#fff7c2" stop-opacity="0.63829786"/>
- <stop offset="0.59394139" id="stop4036" stop-color="#fcaf3e" stop-opacity="0.18348624"/>
- <stop id="stop4038" offset="0.83850551" stop-color="#fcaf3e" stop-opacity="0.50458717"/>
- <stop id="stop4040" offset="1" stop-color="#fcaf3e" stop-opacity="1"/>
- </linearGradient>
- <linearGradient id="linearGradient4026">
- <stop id="stop4028" offset="0" stop-color="#fff9c6" stop-opacity="1"/>
- <stop offset="0.54166669" id="stop4042" stop-color="#fff28c" stop-opacity="1"/>
- <stop id="stop4030" offset="1" stop-color="#ffea85" stop-opacity="1"/>
- </linearGradient>
- <linearGradient xlink:href="#linearGradient4026" id="linearGradient3168" gradientUnits="userSpaceOnUse" x1="-28.968945" y1="-25.326815" x2="-37.19698" y2="-9.5590506"/>
- <radialGradient xlink:href="#linearGradient4032" id="radialGradient4020" cx="-33.519073" cy="-22.113297" fx="-33.519073" fy="-22.113297" r="9.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.487739,1.292402,-1.10267,0.497242,-41.77393,32.41492)"/>
- <radialGradient xlink:href="#linearGradient4083" id="radialGradient4081" cx="23.99999" cy="23.381506" fx="23.99999" fy="23.381506" r="19.141981" gradientTransform="matrix(1.006701,2.235326e-16,-2.23715e-16,1.007522,-0.160816,0.426981)" gradientUnits="userSpaceOnUse"/>
- </defs>
-
- <metadata id="metadata1311">
- <rdf:RDF>
- <cc:Work rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
- <dc:title>weather-clear</dc:title>
- <dc:date>January 2006</dc:date>
- <dc:creator>
- <cc:Agent>
- <dc:title>Ryan Collier (pseudo)</dc:title>
- </cc:Agent>
- </dc:creator>
- <dc:publisher>
- <cc:Agent>
- <dc:title>http://www.tango-project.org</dc:title>
- </cc:Agent>
- </dc:publisher>
- <dc:source>http://www.pseudocode.org</dc:source>
- <dc:subject>
- <rdf:Bag>
- <rdf:li>weather</rdf:li>
- <rdf:li>applet</rdf:li>
- <rdf:li>notification</rdf:li>
- </rdf:Bag>
- </dc:subject>
- <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/"/>
- <dc:contributor>
- <cc:Agent>
- <dc:title>Garrett LeSage</dc:title>
- </cc:Agent>
- </dc:contributor>
- </cc:Work>
- <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/">
- <cc:permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
- <cc:permits rdf:resource="http://web.resource.org/cc/Distribution"/>
- <cc:requires rdf:resource="http://web.resource.org/cc/Notice"/>
- <cc:requires rdf:resource="http://web.resource.org/cc/Attribution"/>
- <cc:permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/>
- <cc:requires rdf:resource="http://web.resource.org/cc/ShareAlike"/>
- </cc:License>
- </rdf:RDF>
- </metadata>
- <g id="layer1">
- <g>
- <g opacity="0.7">
- <path d="M 24 2.5 L 21.625 9.1875 C 22.399034 9.0641318 23.191406 9 24 9 C 24.808594 9 25.600966 9.0641317 26.375 9.1875 L 24 2.5 z M 8.8125 8.78125 L 11.84375 15.21875 C 12.779034 13.928569 13.928569 12.779034 15.21875 11.84375 L 8.8125 8.78125 z M 39.21875 8.78125 L 32.78125 11.84375 C 34.071431 12.779034 35.220966 13.928569 36.15625 15.21875 L 39.21875 8.78125 z M 9.1875 21.59375 L 2.5 23.96875 L 9.1875 26.34375 C 9.0673373 25.57952 9 24.797813 9 24 C 9 23.180625 9.0608858 22.377571 9.1875 21.59375 z M 38.8125 21.625 C 38.935868 22.399034 39 23.191406 39 24 C 39 24.808594 38.935868 25.600966 38.8125 26.375 L 45.5 24 L 38.8125 21.625 z M 11.84375 32.78125 L 8.8125 39.1875 L 15.21875 36.15625 C 13.928569 35.220966 12.779034 34.071431 11.84375 32.78125 z M 36.15625 32.78125 C 35.229789 34.05926 34.087617 35.194799 32.8125 36.125 L 39.21875 39.1875 L 36.15625 32.78125 z M 21.625 38.8125 L 24 45.5 L 26.375 38.8125 C 25.600966 38.935868 24.808594 39 24 39 C 23.191406 39 22.399034 38.935868 21.625 38.8125 z " fill="#fce94f" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.73732895" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
- <path d="M 24 5.25 L 22.65625 9.0625 C 23.098888 9.0231486 23.547187 9 24 9 C 24.452813 9 24.901112 9.0231486 25.34375 9.0625 L 24 5.25 z M 10.78125 10.75 L 12.5 14.375 C 13.071538 13.694089 13.724004 13.038745 14.40625 12.46875 L 10.78125 10.75 z M 37.25 10.75 L 33.625 12.46875 C 34.304675 13.038189 34.961811 13.695325 35.53125 14.375 L 37.25 10.75 z M 9.0625 22.625 L 5.28125 23.96875 L 9.0625 25.3125 C 9.024981 24.880146 9 24.442031 9 24 C 9 23.536406 9.0212735 23.077908 9.0625 22.625 z M 38.9375 22.65625 C 38.976851 23.098888 39 23.547187 39 24 C 39 24.452813 38.976851 24.901112 38.9375 25.34375 L 42.71875 24 L 38.9375 22.65625 z M 35.53125 33.59375 C 34.958293 34.27954 34.309985 34.957363 33.625 35.53125 L 37.25 37.25 L 35.53125 33.59375 z M 12.5 33.625 L 10.78125 37.21875 L 14.375 35.5 C 13.702932 34.935884 13.064116 34.297068 12.5 33.625 z M 22.65625 38.9375 L 24 42.71875 L 25.34375 38.9375 C 24.901112 38.976851 24.452813 39 24 39 C 23.547187 39 23.098888 38.976851 22.65625 38.9375 z " fill="none" fill-opacity="1" stroke="url(#radialGradient4081)" stroke-width="0.84646249" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
- </g>
- <g>
- <g>
- <path transform="matrix(0.778062,-1.061285,1.061287,0.778062,67.47952,3.641324)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1 -41.5,-17.5 A 9.5 9.5 0 1 1 -22.5 -17.5 z" fill="#ffee54" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.75991178" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
- <path transform="matrix(1.244257,-0.167707,0.216642,1.251844,67.61648,40.527)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1 -41.5,-17.5 A 9.5 9.5 0 1 1 -22.5 -17.5 z" fill="url(#radialGradient4020)" fill-opacity="1" stroke="none" stroke-width="1.01737845" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
- <path transform="matrix(0.715791,-0.976349,0.97635,0.715792,64.00044,5.269544)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1 -41.5,-17.5 A 9.5 9.5 0 1 1 -22.5 -17.5 z" fill="none" fill-opacity="1" stroke="url(#linearGradient3168)" stroke-width="0.82601947" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
- </g>
- </g>
- </g>
- </g>
-</svg>
+++ /dev/null
-border.left: 10
-border.top: 10
-border.bottom: 10
-border.right: 10
-source: lineedit.png
+++ /dev/null
-border.left: 10
-border.top: 12
-border.bottom: 12
-border.right: 10
-source: titlebar.png
+++ /dev/null
-border.left: 15
-border.top: 4
-border.bottom: 4
-border.right: 15
-source: toolbutton.png
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"}
+ }
}
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"}
}
- }
}
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"}
+ }
}
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"}
}
- }
}
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"}
}
- }
}
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"
+ 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)
- bar.x = v/(max - min) * (foo.width - bar.width);
+ handle.x = Math.round( v / (max - min) *
+ (mousearea.drag.maximumX - mousearea.drag.minimumX)
+ + mousearea.drag.minimumX);
}
Rectangle {
id:sliderName
- anchors.left:parent.left
+ anchors.left: parent.left
+ anchors.leftMargin: 16
height: childrenRect.height
- width:childrenRect.width
- anchors.verticalCenter:parent.verticalCenter
+ width: Math.max(44, childrenRect.width)
+ anchors.verticalCenter: parent.verticalCenter
Text {
- text:slider.name
- font.pointSize:12
- }
+ text: slider.name + ":"
+ font.pointSize: 12
+ color: "#333"
+ }
}
- Item {
+
+ Rectangle{
id: foo
- height: 6
- width: parent.width - 4 - sliderName.width
- anchors.verticalCenter:parent.verticalCenter
- anchors.left:sliderName.right
- anchors.leftMargin:5
+ 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: bar.horizontalCenter
- color: "blue"
+ anchors.right: handle.horizontalCenter
+ color: slider.color
radius: 3
+ border.width: 1
+ border.color: Qt.darker(color, 1.3)
+ opacity: 0.8
}
- 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"
+ 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: 0
- drag.maximumX: foo.width - parent.width
+ 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)
}
}
}
Button 2.0 Button.qml
LauncherList 2.0 LauncherList.qml
SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml
+Slider 2.0 Slider.qml
<file>LauncherList.qml</file>
<file>SimpleLauncherDelegate.qml</file>
<file>Button.qml</file>
+ <file>Slider.qml</file>
+ <file>images/slider_handle.png</file>
<file>images/back.png</file>
<file>images/next.png</file>
</qresource>
projects / konrad/qtdeclarative.git / commitdiff
