qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Various improvements to Canvas examples 

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 <samuel.rodal@digia.com>
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>
This commit is contained in:
Jens Bache-Wiig 2013-02-24 15:47:38 +01:00 committed by The Qt Project
parent 33334c2ac3
commit f289fdc53e
28 changed files with 624 additions and 1021 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
examples/quick/canvas/bezierCurve/bezierCurve.qml
View File

@ -40,84 +40,88 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
Item { Item {
id:container id:container
width:320 width: 320
height:480 height: 480
Column { Column {
spacing:5 spacing:5
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Bezier Curve"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Canvas { Text {
id:canvas font.pointSize: 24
width:320 font.bold: true
height:280 text: "Bezier Curve"
property string strokeStyle:"red" anchors.horizontalCenter: parent.horizontalCenter
property string fillStyle:"red" color: "#777"
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
Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } Canvas {
Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } id:canvas
Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } 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(); onLineWidthChanged:requestPaint();
onFillChanged:requestPaint(); onFillChanged:requestPaint();
onStrokeChanged:requestPaint(); onStrokeChanged:requestPaint();
onAlphaChanged:requestPaint(); onScaleChanged:requestPaint();
onScaleXChanged:requestPaint(); onRotateChanged:requestPaint();
onScaleYChanged:requestPaint();
onRotateChanged:requestPaint();
onPaint: { onPaint: {
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.save(); var originX = 85
ctx.clearRect(0, 0, canvas.width, canvas.height); var originY = 75
ctx.globalAlpha = canvas.alpha; ctx.save();
ctx.strokeStyle = canvas.strokeStyle; ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = canvas.fillStyle; ctx.translate(originX, originX);
ctx.lineWidth = canvas.lineWidth; ctx.globalAlpha = canvas.alpha;
ctx.scale(canvas.scaleX, canvas.scaleY); ctx.strokeStyle = canvas.strokeStyle;
ctx.rotate(canvas.rotate); ctx.fillStyle = canvas.fillStyle;
//! [0] ctx.lineWidth = canvas.lineWidth;
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();
}
}
Rectangle { ctx.translate(originX, originY)
id:controls ctx.scale(canvas.scale, canvas.scale);
width:320 ctx.rotate(canvas.rotate);
height:150 ctx.translate(-originX, -originY)
Column {
spacing:3 //! [0]
Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} ctx.beginPath();
Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} ctx.moveTo(75,40);
Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} ctx.bezierCurveTo(75,37,70,25,50,25);
Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} 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"}
}
} }

17
examples/quick/canvas/canvas.qrc
View File

@ -3,24 +3,7 @@
<file>canvas.qml</file> <file>canvas.qml</file>
<file>bezierCurve/bezierCurve.qml</file> <file>bezierCurve/bezierCurve.qml</file>
<file>clip/clip.qml</file> <file>clip/clip.qml</file>
<file>contents/Button.qml</file>
<file>contents/qt-logo.png</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>quadraticCurveTo/quadraticCurveTo.qml</file>
<file>roundedrect/roundedrect.qml</file> <file>roundedrect/roundedrect.qml</file>
<file>smile/smile.qml</file> <file>smile/smile.qml</file>

182
examples/quick/canvas/clip/clip.qml
View File

@ -40,111 +40,109 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
Item { Item {
id:container id:container
width:320 width: 320
height:480 height: 480
Column { Column {
spacing:5 spacing:5
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Makes squircle icon with clip"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Canvas { Text {
id:canvas font.pointSize: 24
width:320 font.bold: true
height:280 text: "Squircle with Clip"
property string strokeStyle:"blue" anchors.horizontalCenter: parent.horizontalCenter
property string fillStyle:"steelblue" color: "#777"
property int lineWidth:2 }
property int nSize:nCtrl.value Canvas {
property real radius:rCtrl.value id: canvas
property bool fill:true width: 320
property bool stroke:false height: 280
property real px:xCtrl.value property color strokeStyle: Qt.darker(fillStyle, 1.2)
property real py:yCtrl.value property color fillStyle:"#14aaff" // green
property real alpha:alphaCtrl.value property int lineWidth:2
property string imagefile:"../contents/qt-logo.png" property int nSize:nCtrl.value
antialiasing: true property real radius:rCtrl.value
Component.onCompleted:loadImage(canvas.imagefile); 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();
onRadiusChanged:requestPaint(); onLineWidthChanged:requestPaint();
onLineWidthChanged:requestPaint(); onNSizeChanged:requestPaint();
onNSizeChanged:requestPaint(); onFillChanged:requestPaint();
onFillChanged:requestPaint(); onStrokeChanged:requestPaint();
onStrokeChanged:requestPaint(); onImageLoaded : requestPaint();
onPxChanged:requestPaint(); onPaint: squcirle();
onPyChanged:requestPaint();
onImageLoaded : requestPaint();
onPaint: squcirle(); function squcirle() {
var ctx = canvas.getContext("2d");
var N = canvas.nSize;
var R = canvas.radius;
function squcirle() { N=Math.abs(N);
var ctx = canvas.getContext("2d"); var M=N;
var N = canvas.nSize; if (N>100) M=100;
var R = canvas.radius; if (N<0.00000000001) M=0.00000000001;
N=Math.abs(N); ctx.save();
var M=N; ctx.globalAlpha = canvas.alpha;
if (N>100) M=100; ctx.fillStyle = "white";
if (N<0.00000000001) M=0.00000000001; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save(); ctx.strokeStyle = canvas.strokeStyle;
ctx.globalAlpha =canvas.alpha; ctx.fillStyle = canvas.fillStyle;
ctx.fillStyle = "gray"; ctx.lineWidth = canvas.lineWidth;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = canvas.strokeStyle; ctx.beginPath();
ctx.fillStyle = canvas.fillStyle; var i = 0, x, y;
ctx.lineWidth = canvas.lineWidth; 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(); if (i == 0)
var i = 0, x, y; ctx.moveTo(x, y);
for (i=0; i<(2*R+1); i++){ else
x = Math.round(i-R) + canvas.px; ctx.lineTo(x, y);
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) for (i=(2*R); i<(4*R+1); i++){
ctx.moveTo(x, y); x =Math.round(3*R-i)+canvas.px;
else 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.lineTo(x, y);
} }
ctx.closePath();
if (canvas.stroke) {
ctx.stroke();
}
for (i=(2*R); i<(4*R+1); i++){ if (canvas.fill) {
x =Math.round(3*R-i)+canvas.px; ctx.fill();
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) { //! [0]
ctx.fill(); ctx.clip();
} ctx.drawImage(canvas.imagefile, 0, 0);
//! [0] //! [0]
ctx.clip();
ctx.drawImage(canvas.imagefile, 0, 0); ctx.restore();
//! [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"}
} }
} }
} 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"}
}
} }

87
examples/quick/canvas/contents/Button.qml
View File

@ -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 }
}
]
}

74
examples/quick/canvas/contents/ScrollBar.qml
View File

@ -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)
}
}

70
examples/quick/canvas/contents/TitleBar.qml
View File

@ -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"
}
}

69
examples/quick/canvas/contents/ToolBar.qml
View File

@ -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)
}
}
}
}

BIN
examples/quick/canvas/contents/images/button-pressed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 571 B

BIN
examples/quick/canvas/contents/images/button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 564 B

82
examples/quick/canvas/contents/images/default.svg
View File

@ -1,82 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

BIN
examples/quick/canvas/contents/images/gloss.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
examples/quick/canvas/contents/images/lineedit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

5
examples/quick/canvas/contents/images/lineedit.sci
View File

@ -1,5 +0,0 @@
border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: lineedit.png

BIN
examples/quick/canvas/contents/images/quit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
examples/quick/canvas/contents/images/stripes.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 257 B

BIN
examples/quick/canvas/contents/images/titlebar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

5
examples/quick/canvas/contents/images/titlebar.sci
View File

@ -1,5 +0,0 @@
border.left: 10
border.top: 12
border.bottom: 12
border.right: 10
source: titlebar.png

BIN
examples/quick/canvas/contents/images/toolbutton.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

5
examples/quick/canvas/contents/images/toolbutton.sci
View File

@ -1,5 +0,0 @@
border.left: 15
border.top: 4
border.bottom: 4
border.right: 15
source: toolbutton.png

158
examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
View File

@ -40,91 +40,97 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
Item { Item {
id:container id:container
width:320 width:320
height:480 height:480
Column { Column {
spacing:5 spacing:5
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Quadratic Curve"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Canvas { Text {
id:canvas font.pointSize: 24
width:320 font.bold: true
height:280 text: "Quadratic Curve"
property string strokeStyle:"steelblue" anchors.horizontalCenter: parent.horizontalCenter
property string fillStyle:"yellow" color: "#777"
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
onLineWidthChanged:requestPaint(); Canvas {
onFillChanged:requestPaint(); id: canvas
onStrokeChanged:requestPaint(); width: 320
onAlphaChanged:requestPaint(); height: 280
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} }
onPaint: { property color strokeStyle: Qt.darker(fillStyle, 1.3)
var ctx = canvas.getContext('2d'); property color fillStyle: "#14aaff" // blue
ctx.save(); property int lineWidth: lineWidthCtrl.value
ctx.clearRect(0, 0, canvas.width, canvas.height); property bool fill: true
ctx.globalAlpha = canvas.alpha; property bool stroke: true
ctx.strokeStyle = canvas.strokeStyle; property real alpha: 1.0
ctx.fillStyle = canvas.fillStyle; property real scale : scaleCtrl.value
ctx.lineWidth = canvas.lineWidth; property real rotate : rotateCtrl.value
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();
antialiasing: true
// ![1] onLineWidthChanged:requestPaint();
ctx.fillStyle="green"; onFillChanged:requestPaint();
ctx.font = "Bold 15px"; onStrokeChanged:requestPaint();
onScaleChanged:requestPaint();
onRotateChanged:requestPaint();
ctx.fillText("QML酷毙了", 30, 60); onPaint: {
// ![1] var ctx = canvas.getContext('2d');
ctx.restore(); var originX = 75
} var originY = 75
}
Rectangle { ctx.save();
id:controls ctx.clearRect(0, 0, canvas.width, canvas.height);
width:320 ctx.translate(originX, originX);
height:150 ctx.strokeStyle = canvas.strokeStyle;
Column { ctx.fillStyle = canvas.fillStyle;
spacing:3 ctx.lineWidth = canvas.lineWidth;
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"} ctx.translate(originX, originY)
Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} ctx.rotate(canvas.rotate);
Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} ctx.scale(canvas.scale, canvas.scale);
Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} ctx.translate(-originX, -originY)
// ![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"}
}
} }

142
examples/quick/canvas/roundedrect/roundedrect.qml
View File

@ -40,84 +40,82 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
Item { Item {
id:container id:container
width:320 width: 320
height:480 height: 480
Column { Column {
spacing:5 spacing: 6
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Rounded rectangle"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Canvas { Text {
id:canvas font.pointSize: 24
width:320 font.bold: true
height:280 text: "Rounded rectangle"
antialiasing: true anchors.horizontalCenter: parent.horizontalCenter
color: "#777"
}
Canvas {
id: canvas
width: 320
height: 280
antialiasing: true
property int radius: rCtrl.value property int radius: rCtrl.value
property int rectx: rxCtrl.value property int rectx: 60
property int recty: ryCtrl.value property int recty: 60
property int rectWidth: width - 2*rectx property int rectWidth: width - 2*rectx
property int rectHeight: height - 2*recty property int rectHeight: height - 2*recty
property string strokeStyle:"blue" property color strokeStyle: Qt.darker(fillStyle, 1.4)
property string fillStyle:"steelblue" property color fillStyle: "#ae32a0" // purple
property int lineWidth:lineWidthCtrl.value property int lineWidth: lineWidthCtrl.value
property bool fill:true property bool fill: true
property bool stroke:true property bool stroke: true
property real alpha:alphaCtrl.value property real alpha: 1.0
onLineWidthChanged:requestPaint(); onLineWidthChanged:requestPaint();
onFillChanged:requestPaint(); onFillChanged:requestPaint();
onStrokeChanged:requestPaint(); onStrokeChanged:requestPaint();
onRadiusChanged:requestPaint(); onRadiusChanged:requestPaint();
onRectxChanged:requestPaint();
onRectyChanged:requestPaint();
onAlphaChanged:requestPaint();
onPaint: { onPaint: {
var ctx = getContext("2d"); var ctx = getContext("2d");
ctx.save(); ctx.save();
ctx.clearRect(0,0,canvas.width, canvas.height); ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.strokeStyle = canvas.strokeStyle; ctx.strokeStyle = canvas.strokeStyle;
ctx.lineWidth = canvas.lineWidth ctx.lineWidth = canvas.lineWidth
ctx.fillStyle = canvas.fillStyle ctx.fillStyle = canvas.fillStyle
ctx.globalAlpha = canvas.alpha ctx.globalAlpha = canvas.alpha
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(rectx+radius,recty); // top side ctx.moveTo(rectx+radius,recty); // top side
ctx.lineTo(rectx+rectWidth-radius,recty); ctx.lineTo(rectx+rectWidth-radius,recty);
// draw top right corner // draw top right corner
ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius); ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius);
ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side
// draw bottom right corner // draw bottom right corner
ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius); ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius);
ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side
// draw bottom left corner // draw bottom left corner
ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius); ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius);
ctx.lineTo(rectx,recty+radius); // left side ctx.lineTo(rectx,recty+radius); // left side
// draw top left corner // draw top left corner
ctx.arcTo(rectx,recty,rectx+radius,recty,radius); ctx.arcTo(rectx,recty,rectx+radius,recty,radius);
ctx.closePath(); ctx.closePath();
if (canvas.fill) if (canvas.fill)
ctx.fill(); ctx.fill();
if (canvas.stroke) if (canvas.stroke)
ctx.stroke(); ctx.stroke();
ctx.restore(); ctx.restore();
}
} }
} }
Column {
Rectangle { anchors.bottom: parent.bottom
id:controls anchors.bottomMargin: 12
width:320 Slider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"}
height:150 Slider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"}
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"}
}
} }
}
} }

149
examples/quick/canvas/smile/smile.qml
View File

@ -40,87 +40,90 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
Item { Item {
id:container id: container
width:320 width: 320
height:480 height: 480
Column { Column {
spacing:5 spacing: 6
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Canvas { Text {
id:canvas font.pointSize: 24
width:320 font.bold: true
height:280 text: "Smile with arcs"
antialiasing: true anchors.horizontalCenter: parent.horizontalCenter
color: "#777"
}
property string strokeStyle:"green" Canvas {
property string fillStyle:"yellow" id: canvas
property int lineWidth:lineWidthCtrl.value width: 320
property bool fill:true height: parent.height - controls.height
property bool stroke:true antialiasing: true
property real alpha:alphaCtrl.value
property real scaleX : scaleXCtrl.value
property real scaleY : scaleYCtrl.value
property real rotate : rotateCtrl.value
onLineWidthChanged:requestPaint(); property color strokeStyle: Qt.darker(fillStyle, 1.6)
onFillChanged:requestPaint(); property color fillStyle: "#e0c31e" // yellow
onStrokeChanged:requestPaint(); property int lineWidth: lineWidthCtrl.value
onAlphaChanged:requestPaint(); property bool fill: true
onScaleXChanged:requestPaint(); property bool stroke: true
onScaleYChanged:requestPaint(); property real scale : scaleCtrl.value
onRotateChanged:requestPaint(); property real rotate : rotateCtrl.value
Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } onLineWidthChanged:requestPaint();
Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } onFillChanged:requestPaint();
Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } onStrokeChanged:requestPaint();
onScaleChanged:requestPaint();
onRotateChanged:requestPaint();
onPaint: { onPaint: {
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.save(); var originX = 85
ctx.clearRect(0, 0, canvas.width, canvas.height); var originY = 75
ctx.globalAlpha = canvas.alpha; ctx.save();
ctx.strokeStyle = canvas.strokeStyle; ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = canvas.fillStyle; ctx.translate(originX, originX);
ctx.lineWidth = canvas.lineWidth; ctx.globalAlpha = canvas.alpha;
ctx.scale(canvas.scaleX, canvas.scaleY); ctx.strokeStyle = canvas.strokeStyle;
ctx.rotate(canvas.rotate); ctx.fillStyle = canvas.fillStyle;
ctx.beginPath(); ctx.lineWidth = canvas.lineWidth;
ctx.moveTo(75 + 50 * Math.cos(0),
75 - 50 * Math.sin(Math.PI*2)); ctx.translate(originX, originY)
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.scale(canvas.scale, canvas.scale);
ctx.moveTo(75,70); ctx.rotate(canvas.rotate);
ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) ctx.translate(-originX, -originY)
ctx.moveTo(60,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.beginPath();
ctx.moveTo(90 + 5 * Math.cos(0), ctx.moveTo(75 + 50 * Math.cos(0),
65 - 5 * Math.sin(Math.PI*2)); 75 - 50 * Math.sin(Math.PI*2));
ctx.moveTo(90,65); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.moveTo(75,70);
ctx.closePath(); ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise)
if (canvas.fill) ctx.moveTo(60,65);
ctx.fill(); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
if (canvas.stroke) ctx.moveTo(90 + 5 * Math.cos(0),
ctx.stroke(); 65 - 5 * Math.sin(Math.PI*2));
ctx.restore(); 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 {
Rectangle { id: controls
id:controls anchors.bottom: parent.bottom
width:320 anchors.bottomMargin: 12
height:150 Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"}
Column { Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"}
spacing:3 Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
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"}
}
} }
}
} }

205
examples/quick/canvas/squircle/squircle.qml
View File

@ -40,114 +40,111 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
Item { Item {
id:container id: container
width:320 width: 320
height:480 height: 480
Column { Column {
spacing:5 spacing: 6
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Squircles"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Image { Text {
anchors.horizontalCenter:parent.horizontalCenter font.pointSize: 24
source:"squircle.png" font.bold: true
width:250 text: "Squircles"
height:25 anchors.horizontalCenter: parent.horizontalCenter
} color: "#777"
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();
} }
}
Rectangle { Image {
id:controls anchors.horizontalCenter: parent.horizontalCenter
width:320 source: "squircle.png"
height:150 width: 250
Column { height: 25
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"}
} }
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"}
} }
}
} }

150
examples/quick/canvas/tiger/tiger.qml
View File

@ -40,89 +40,95 @@
import QtQuick 2.0 import QtQuick 2.0
import "../contents" import "../contents"
import "../../shared"
import "tiger.js" as Tiger import "tiger.js" as Tiger
Item { Item {
id:container id: container
width:320 width: 320
height:480 height: 480
Column { Column {
spacing:5 spacing: 6
anchors.fill:parent anchors.fill: parent
Text { font.pointSize:15; text:"Tiger with SVG path"; anchors.horizontalCenter:parent.horizontalCenter} anchors.topMargin: 12
Canvas { Text {
id:canvas font.pointSize: 24
width:320 font.bold: true
height:280 text: "Tiger with SVG path"
antialiasing: true anchors.horizontalCenter: parent.horizontalCenter
property string strokeStyle:"steelblue" color: "#777"
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
onFillChanged: requestPaint();
onStrokeChanged: requestPaint();
onAlphaChanged: requestPaint();
onScaleXChanged: requestPaint();
onScaleYChanged: requestPaint();
onRotateChanged: requestPaint();
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;
//! [0] Canvas {
for (var i = 0; i < canvas.frame && i < Tiger.tiger.length; i++) { id: canvas
if (Tiger.tiger[i].width != undefined) width: 320
ctx.lineWidth = Tiger.tiger[i].width; height: 280
antialiasing: true
if (Tiger.tiger[i].path != undefined) property string strokeStyle: "steelblue"
ctx.path = Tiger.tiger[i].path; 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
if (Tiger.tiger[i].fill != undefined) { onFillChanged: requestPaint();
ctx.fillStyle = Tiger.tiger[i].fill; onStrokeChanged: requestPaint();
ctx.fill(); onAlphaChanged: requestPaint();
} onScaleChanged: requestPaint();
onRotateChanged: requestPaint();
if (Tiger.tiger[i].stroke != undefined) {
ctx.strokeStyle = Tiger.tiger[i].stroke; onPaint: {
ctx.stroke(); var ctx = canvas.getContext('2d');
var originX = canvas.width/2 + 30
var originY = canvas.height/2 + 60
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)
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 { Column {
id:controls id: controls
width:320 anchors.bottom: parent.bottom
height:150 anchors.bottomMargin: 12
Column { Slider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"}
spacing:3 Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleX"} Slider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"}
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"}
}
} }
}
} }

96
examples/quick/canvas/contents/Slider.qml → examples/quick/shared/Slider.qml
View File

@ -42,73 +42,75 @@
import QtQuick 2.0 import QtQuick 2.0
Item { Item {
id:slider id: slider
property real min:0 height: 26
property real max:1 width: 320
property real value: min + (max - min) * (bar.x / (foo.width - bar.width))
property real init:min+(max-min)/2 property real min: 0
property string name:"Slider" 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) Component.onCompleted: setValue(init)
function setValue(v) { function setValue(v) {
if (min < max) 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 { Rectangle {
id:sliderName id:sliderName
anchors.left:parent.left anchors.left: parent.left
anchors.leftMargin: 16
height: childrenRect.height height: childrenRect.height
width:childrenRect.width width: Math.max(44, childrenRect.width)
anchors.verticalCenter:parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Text { Text {
text:slider.name text: slider.name + ":"
font.pointSize:12 font.pointSize: 12
} color: "#333"
}
} }
Item {
Rectangle{
id: foo id: foo
height: 6 width: parent.width - 8 - sliderName.width
width: parent.width - 4 - sliderName.width color: "#eee"
anchors.verticalCenter:parent.verticalCenter height: 7
anchors.left:sliderName.right radius: 3
anchors.leftMargin:5 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 { Rectangle {
height: parent.height height: parent.height
anchors.left: parent.left anchors.left: parent.left
anchors.right: bar.horizontalCenter anchors.right: handle.horizontalCenter
color: "blue" color: slider.color
radius: 3 radius: 3
border.width: 1
border.color: Qt.darker(color, 1.3)
opacity: 0.8
} }
Rectangle { Image {
height: parent.height id: handle
anchors.left: bar.horizontalCenter source: "images/slider_handle.png"
anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter
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 { MouseArea {
id: mousearea
anchors.fill: parent anchors.fill: parent
anchors.margins: -4
drag.target: parent drag.target: parent
drag.axis: Drag.XAxis drag.axis: Drag.XAxis
drag.minimumX: 0 drag.minimumX: Math.round(-handle.width / 2 + 3)
drag.maximumX: foo.width - parent.width drag.maximumX: Math.round(foo.width - handle.width/2 - 3)
property real value: (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX)
} }
} }
} }

BIN
examples/quick/shared/images/slider_handle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 887 B

1
examples/quick/shared/qmldir
View File

@ -1,3 +1,4 @@
Button 2.0 Button.qml Button 2.0 Button.qml
LauncherList 2.0 LauncherList.qml LauncherList 2.0 LauncherList.qml
SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml
Slider 2.0 Slider.qml

2
examples/quick/shared/shared.qrc
View File

@ -3,6 +3,8 @@
<file>LauncherList.qml</file> <file>LauncherList.qml</file>
<file>SimpleLauncherDelegate.qml</file> <file>SimpleLauncherDelegate.qml</file>
<file>Button.qml</file> <file>Button.qml</file>
<file>Slider.qml</file>
<file>images/slider_handle.png</file>
<file>images/back.png</file> <file>images/back.png</file>
<file>images/next.png</file> <file>images/next.png</file>
</qresource> </qresource>