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
The Qt Project
parent
33334c2ac3
commit
f289fdc53e
|
|
@ -40,84 +40,88 @@
|
|||
|
||||
import QtQuick 2.0
|
||||
import "../contents"
|
||||
import "../../shared"
|
||||
|
||||
Item {
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
id:container
|
||||
width: 320
|
||||
height: 480
|
||||
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill:parent
|
||||
Text { font.pointSize:15; text:"Bezier Curve"; anchors.horizontalCenter:parent.horizontalCenter}
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
property string strokeStyle:"red"
|
||||
property string fillStyle:"red"
|
||||
property int lineWidth:lineWidthCtrl.value
|
||||
property bool fill:true
|
||||
property bool stroke:true
|
||||
property real alpha:alphaCtrl.value
|
||||
property real scaleX : scaleXCtrl.value
|
||||
property real scaleY : scaleYCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
antialiasing: true
|
||||
Text {
|
||||
font.pointSize: 24
|
||||
font.bold: true
|
||||
text: "Bezier Curve"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "#777"
|
||||
}
|
||||
|
||||
Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
|
||||
Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
|
||||
Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
property color strokeStyle: Qt.darker(fillStyle, 1.4)
|
||||
property color fillStyle: "#b40000" // red
|
||||
property int lineWidth: lineWidthCtrl.value
|
||||
property bool fill: true
|
||||
property bool stroke: true
|
||||
property real alpha: 1.0
|
||||
property real scale : scaleCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
antialiasing: true
|
||||
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onAlphaChanged:requestPaint();
|
||||
onScaleXChanged:requestPaint();
|
||||
onScaleYChanged:requestPaint();
|
||||
onRotateChanged:requestPaint();
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onScaleChanged:requestPaint();
|
||||
onRotateChanged:requestPaint();
|
||||
|
||||
onPaint: {
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.globalAlpha = canvas.alpha;
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
ctx.scale(canvas.scaleX, canvas.scaleY);
|
||||
ctx.rotate(canvas.rotate);
|
||||
//! [0]
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(75,40);
|
||||
ctx.bezierCurveTo(75,37,70,25,50,25);
|
||||
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
|
||||
ctx.bezierCurveTo(20,80,40,102,75,120);
|
||||
ctx.bezierCurveTo(110,102,130,80,130,62.5);
|
||||
ctx.bezierCurveTo(130,62.5,130,25,100,25);
|
||||
ctx.bezierCurveTo(85,25,75,37,75,40);
|
||||
ctx.closePath();
|
||||
//! [0]
|
||||
if (canvas.fill)
|
||||
ctx.fill();
|
||||
if (canvas.stroke)
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
onPaint: {
|
||||
var ctx = canvas.getContext('2d');
|
||||
var originX = 85
|
||||
var originY = 75
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(originX, originX);
|
||||
ctx.globalAlpha = canvas.alpha;
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
|
||||
Rectangle {
|
||||
id:controls
|
||||
width:320
|
||||
height:150
|
||||
Column {
|
||||
spacing:3
|
||||
Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"}
|
||||
Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"}
|
||||
Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"}
|
||||
Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"}
|
||||
Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
|
||||
ctx.translate(originX, originY)
|
||||
ctx.scale(canvas.scale, canvas.scale);
|
||||
ctx.rotate(canvas.rotate);
|
||||
ctx.translate(-originX, -originY)
|
||||
|
||||
//! [0]
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(75,40);
|
||||
ctx.bezierCurveTo(75,37,70,25,50,25);
|
||||
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
|
||||
ctx.bezierCurveTo(20,80,40,102,75,120);
|
||||
ctx.bezierCurveTo(110,102,130,80,130,62.5);
|
||||
ctx.bezierCurveTo(130,62.5,130,25,100,25);
|
||||
ctx.bezierCurveTo(85,25,75,37,75,40);
|
||||
ctx.closePath();
|
||||
//! [0]
|
||||
if (canvas.fill)
|
||||
ctx.fill();
|
||||
if (canvas.stroke)
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Column {
|
||||
id: controls
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 12
|
||||
Slider {id: lineWidthCtrl; min: 1; max: 10; init: 2; name: "Outline"}
|
||||
Slider {id: scaleCtrl; min: 0.1; max: 10; init: 1; name: "Scale"}
|
||||
Slider {id: rotateCtrl; min: 0; max: Math.PI*2; init: 0; name: "Rotate"}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,24 +3,7 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -40,111 +40,109 @@
|
|||
|
||||
import QtQuick 2.0
|
||||
import "../contents"
|
||||
import "../../shared"
|
||||
|
||||
Item {
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
id:container
|
||||
width: 320
|
||||
height: 480
|
||||
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill:parent
|
||||
Text { font.pointSize:15; text:"Makes squircle icon with clip"; anchors.horizontalCenter:parent.horizontalCenter}
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
property string strokeStyle:"blue"
|
||||
property string fillStyle:"steelblue"
|
||||
property int lineWidth:2
|
||||
property int nSize:nCtrl.value
|
||||
property real radius:rCtrl.value
|
||||
property bool fill:true
|
||||
property bool stroke:false
|
||||
property real px:xCtrl.value
|
||||
property real py:yCtrl.value
|
||||
property real alpha:alphaCtrl.value
|
||||
property string imagefile:"../contents/qt-logo.png"
|
||||
antialiasing: true
|
||||
Component.onCompleted:loadImage(canvas.imagefile);
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
Text {
|
||||
font.pointSize: 24
|
||||
font.bold: true
|
||||
text: "Squircle with Clip"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "#777"
|
||||
}
|
||||
Canvas {
|
||||
id: canvas
|
||||
width: 320
|
||||
height: 280
|
||||
property color strokeStyle: Qt.darker(fillStyle, 1.2)
|
||||
property color fillStyle:"#14aaff" // green
|
||||
property int lineWidth:2
|
||||
property int nSize:nCtrl.value
|
||||
property real radius:rCtrl.value
|
||||
property bool fill:true
|
||||
property bool stroke:false
|
||||
property real px: width/2
|
||||
property real py: height/2 + 20
|
||||
property real alpha: 1.0
|
||||
property string imagefile:"../contents/qt-logo.png"
|
||||
antialiasing: true
|
||||
Component.onCompleted:loadImage(canvas.imagefile);
|
||||
|
||||
onAlphaChanged:requestPaint();
|
||||
onRadiusChanged:requestPaint();
|
||||
onLineWidthChanged:requestPaint();
|
||||
onNSizeChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onPxChanged:requestPaint();
|
||||
onPyChanged:requestPaint();
|
||||
|
||||
onImageLoaded : requestPaint();
|
||||
onRadiusChanged:requestPaint();
|
||||
onLineWidthChanged:requestPaint();
|
||||
onNSizeChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onImageLoaded : requestPaint();
|
||||
onPaint: squcirle();
|
||||
|
||||
onPaint: squcirle();
|
||||
function squcirle() {
|
||||
var ctx = canvas.getContext("2d");
|
||||
var N = canvas.nSize;
|
||||
var R = canvas.radius;
|
||||
|
||||
function squcirle() {
|
||||
var ctx = canvas.getContext("2d");
|
||||
var N = canvas.nSize;
|
||||
var R = canvas.radius;
|
||||
N=Math.abs(N);
|
||||
var M=N;
|
||||
if (N>100) M=100;
|
||||
if (N<0.00000000001) M=0.00000000001;
|
||||
|
||||
N=Math.abs(N);
|
||||
var M=N;
|
||||
if (N>100) M=100;
|
||||
if (N<0.00000000001) M=0.00000000001;
|
||||
ctx.save();
|
||||
ctx.globalAlpha = canvas.alpha;
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.save();
|
||||
ctx.globalAlpha =canvas.alpha;
|
||||
ctx.fillStyle = "gray";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
ctx.beginPath();
|
||||
var i = 0, x, y;
|
||||
for (i=0; i<(2*R+1); i++){
|
||||
x = Math.round(i-R) + canvas.px;
|
||||
y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
|
||||
|
||||
ctx.beginPath();
|
||||
var i = 0, x, y;
|
||||
for (i=0; i<(2*R+1); i++){
|
||||
x = Math.round(i-R) + canvas.px;
|
||||
y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
|
||||
if (i == 0)
|
||||
ctx.moveTo(x, y);
|
||||
else
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
|
||||
if (i == 0)
|
||||
ctx.moveTo(x, y);
|
||||
else
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
for (i=(2*R); i<(4*R+1); i++){
|
||||
x =Math.round(3*R-i)+canvas.px;
|
||||
y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.closePath();
|
||||
if (canvas.stroke) {
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
for (i=(2*R); i<(4*R+1); i++){
|
||||
x =Math.round(3*R-i)+canvas.px;
|
||||
y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.closePath();
|
||||
if (canvas.stroke) {
|
||||
ctx.stroke();
|
||||
}
|
||||
if (canvas.fill) {
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
if (canvas.fill) {
|
||||
ctx.fill();
|
||||
}
|
||||
//! [0]
|
||||
ctx.clip();
|
||||
//! [0]
|
||||
ctx.clip();
|
||||
ctx.drawImage(canvas.imagefile, 0, 0);
|
||||
//! [0]
|
||||
|
||||
ctx.drawImage(canvas.imagefile, 0, 0);
|
||||
//! [0]
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id:controls
|
||||
width:320
|
||||
height:150
|
||||
Column {
|
||||
spacing:3
|
||||
Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"}
|
||||
Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"}
|
||||
Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"}
|
||||
Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"}
|
||||
Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Column {
|
||||
id: controls
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 12
|
||||
Slider {id: nCtrl; min: 1; max: 10; init: 4; name:"N"}
|
||||
Slider {id: rCtrl; min: 30; max: 180; init: 80; name:"Radius"}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 571 B |
Binary file not shown.
|
Before Width: | Height: | Size: 564 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
border.left: 10
|
||||
border.top: 10
|
||||
border.bottom: 10
|
||||
border.right: 10
|
||||
source: lineedit.png
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 257 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
border.left: 10
|
||||
border.top: 12
|
||||
border.bottom: 12
|
||||
border.right: 10
|
||||
source: titlebar.png
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
border.left: 15
|
||||
border.top: 4
|
||||
border.bottom: 4
|
||||
border.right: 15
|
||||
source: toolbutton.png
|
||||
|
|
@ -40,91 +40,97 @@
|
|||
|
||||
import QtQuick 2.0
|
||||
import "../contents"
|
||||
import "../../shared"
|
||||
|
||||
Item {
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill:parent
|
||||
Text { font.pointSize:15; text:"Quadratic Curve"; anchors.horizontalCenter:parent.horizontalCenter}
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
property string strokeStyle:"steelblue"
|
||||
property string fillStyle:"yellow"
|
||||
property int lineWidth:lineWidthCtrl.value
|
||||
property bool fill:true
|
||||
property bool stroke:true
|
||||
property real alpha:alphaCtrl.value
|
||||
property real scaleX : scaleXCtrl.value
|
||||
property real scaleY : scaleYCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
antialiasing: true
|
||||
Text {
|
||||
font.pointSize: 24
|
||||
font.bold: true
|
||||
text: "Quadratic Curve"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "#777"
|
||||
}
|
||||
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onAlphaChanged:requestPaint();
|
||||
onScaleXChanged:requestPaint();
|
||||
onScaleYChanged:requestPaint();
|
||||
onRotateChanged:requestPaint();
|
||||
Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
|
||||
Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
|
||||
Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
|
||||
Canvas {
|
||||
id: canvas
|
||||
width: 320
|
||||
height: 280
|
||||
|
||||
onPaint: {
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.globalAlpha = canvas.alpha;
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
ctx.scale(canvas.scaleX, canvas.scaleY);
|
||||
ctx.rotate(canvas.rotate);
|
||||
// ![0]
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(75,25);
|
||||
ctx.quadraticCurveTo(25,25,25,62.5);
|
||||
ctx.quadraticCurveTo(25,100,50,100);
|
||||
ctx.quadraticCurveTo(50,120,30,125);
|
||||
ctx.quadraticCurveTo(60,120,65,100);
|
||||
ctx.quadraticCurveTo(125,100,125,62.5);
|
||||
ctx.quadraticCurveTo(125,25,75,25);
|
||||
ctx.closePath();
|
||||
// ![0]
|
||||
if (canvas.fill)
|
||||
ctx.fill();
|
||||
if (canvas.stroke)
|
||||
ctx.stroke();
|
||||
property color strokeStyle: Qt.darker(fillStyle, 1.3)
|
||||
property color fillStyle: "#14aaff" // blue
|
||||
property int lineWidth: lineWidthCtrl.value
|
||||
property bool fill: true
|
||||
property bool stroke: true
|
||||
property real alpha: 1.0
|
||||
property real scale : scaleCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
|
||||
antialiasing: true
|
||||
|
||||
// ![1]
|
||||
ctx.fillStyle="green";
|
||||
ctx.font = "Bold 15px";
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onScaleChanged:requestPaint();
|
||||
onRotateChanged:requestPaint();
|
||||
|
||||
ctx.fillText("QML酷毙了", 30, 60);
|
||||
// ![1]
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
onPaint: {
|
||||
var ctx = canvas.getContext('2d');
|
||||
var originX = 75
|
||||
var originY = 75
|
||||
|
||||
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.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)
|
||||
|
||||
// ![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"}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,84 +40,82 @@
|
|||
|
||||
import QtQuick 2.0
|
||||
import "../contents"
|
||||
import "../../shared"
|
||||
|
||||
Item {
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
id:container
|
||||
width: 320
|
||||
height: 480
|
||||
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill:parent
|
||||
Text { font.pointSize:15; text:"Rounded rectangle"; anchors.horizontalCenter:parent.horizontalCenter}
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
antialiasing: true
|
||||
Column {
|
||||
spacing: 6
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
Text {
|
||||
font.pointSize: 24
|
||||
font.bold: true
|
||||
text: "Rounded rectangle"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "#777"
|
||||
}
|
||||
Canvas {
|
||||
id: canvas
|
||||
width: 320
|
||||
height: 280
|
||||
antialiasing: true
|
||||
|
||||
property int radius: rCtrl.value
|
||||
property int rectx: rxCtrl.value
|
||||
property int recty: ryCtrl.value
|
||||
property int rectWidth: width - 2*rectx
|
||||
property int rectHeight: height - 2*recty
|
||||
property string strokeStyle:"blue"
|
||||
property string fillStyle:"steelblue"
|
||||
property int lineWidth:lineWidthCtrl.value
|
||||
property bool fill:true
|
||||
property bool stroke:true
|
||||
property real alpha:alphaCtrl.value
|
||||
property int radius: rCtrl.value
|
||||
property int rectx: 60
|
||||
property int recty: 60
|
||||
property int rectWidth: width - 2*rectx
|
||||
property int rectHeight: height - 2*recty
|
||||
property color strokeStyle: Qt.darker(fillStyle, 1.4)
|
||||
property color fillStyle: "#ae32a0" // purple
|
||||
property int lineWidth: lineWidthCtrl.value
|
||||
property bool fill: true
|
||||
property bool stroke: true
|
||||
property real alpha: 1.0
|
||||
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onRadiusChanged:requestPaint();
|
||||
onRectxChanged:requestPaint();
|
||||
onRectyChanged:requestPaint();
|
||||
onAlphaChanged:requestPaint();
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onRadiusChanged:requestPaint();
|
||||
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
ctx.save();
|
||||
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.lineWidth = canvas.lineWidth
|
||||
ctx.fillStyle = canvas.fillStyle
|
||||
ctx.globalAlpha = canvas.alpha
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(rectx+radius,recty); // top side
|
||||
ctx.lineTo(rectx+rectWidth-radius,recty);
|
||||
// draw top right corner
|
||||
ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius);
|
||||
ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side
|
||||
// draw bottom right corner
|
||||
ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius);
|
||||
ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side
|
||||
// draw bottom left corner
|
||||
ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius);
|
||||
ctx.lineTo(rectx,recty+radius); // left side
|
||||
// draw top left corner
|
||||
ctx.arcTo(rectx,recty,rectx+radius,recty,radius);
|
||||
ctx.closePath();
|
||||
if (canvas.fill)
|
||||
ctx.fill();
|
||||
if (canvas.stroke)
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
ctx.save();
|
||||
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.lineWidth = canvas.lineWidth
|
||||
ctx.fillStyle = canvas.fillStyle
|
||||
ctx.globalAlpha = canvas.alpha
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(rectx+radius,recty); // top side
|
||||
ctx.lineTo(rectx+rectWidth-radius,recty);
|
||||
// draw top right corner
|
||||
ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius);
|
||||
ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side
|
||||
// draw bottom right corner
|
||||
ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius);
|
||||
ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side
|
||||
// draw bottom left corner
|
||||
ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius);
|
||||
ctx.lineTo(rectx,recty+radius); // left side
|
||||
// draw top left corner
|
||||
ctx.arcTo(rectx,recty,rectx+radius,recty,radius);
|
||||
ctx.closePath();
|
||||
if (canvas.fill)
|
||||
ctx.fill();
|
||||
if (canvas.stroke)
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id:controls
|
||||
width:320
|
||||
height:150
|
||||
Column {
|
||||
spacing:3
|
||||
Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"}
|
||||
Slider {id:rxCtrl; width:300; height:20; min:5; max:30; init:10; name:"rectx"}
|
||||
Slider {id:ryCtrl; width:300; height:20; min:5; max:30; init:10; name:"recty"}
|
||||
Slider {id:rCtrl; width:300; height:20; min:10; max:100; init:40; name:"Radius"}
|
||||
Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
|
||||
}
|
||||
Column {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 12
|
||||
Slider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"}
|
||||
Slider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,87 +40,90 @@
|
|||
|
||||
import QtQuick 2.0
|
||||
import "../contents"
|
||||
import "../../shared"
|
||||
|
||||
Item {
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
id: container
|
||||
width: 320
|
||||
height: 480
|
||||
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill:parent
|
||||
Text { font.pointSize:15; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter}
|
||||
Column {
|
||||
spacing: 6
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
antialiasing: true
|
||||
Text {
|
||||
font.pointSize: 24
|
||||
font.bold: true
|
||||
text: "Smile with arcs"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "#777"
|
||||
}
|
||||
|
||||
property string strokeStyle:"green"
|
||||
property string fillStyle:"yellow"
|
||||
property int lineWidth:lineWidthCtrl.value
|
||||
property bool fill:true
|
||||
property bool stroke:true
|
||||
property real alpha:alphaCtrl.value
|
||||
property real scaleX : scaleXCtrl.value
|
||||
property real scaleY : scaleYCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
Canvas {
|
||||
id: canvas
|
||||
width: 320
|
||||
height: parent.height - controls.height
|
||||
antialiasing: true
|
||||
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onAlphaChanged:requestPaint();
|
||||
onScaleXChanged:requestPaint();
|
||||
onScaleYChanged:requestPaint();
|
||||
onRotateChanged:requestPaint();
|
||||
property color strokeStyle: Qt.darker(fillStyle, 1.6)
|
||||
property color fillStyle: "#e0c31e" // yellow
|
||||
property int lineWidth: lineWidthCtrl.value
|
||||
property bool fill: true
|
||||
property bool stroke: true
|
||||
property real scale : scaleCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
|
||||
Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
|
||||
Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
|
||||
Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
|
||||
onLineWidthChanged:requestPaint();
|
||||
onFillChanged:requestPaint();
|
||||
onStrokeChanged:requestPaint();
|
||||
onScaleChanged:requestPaint();
|
||||
onRotateChanged:requestPaint();
|
||||
|
||||
onPaint: {
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.globalAlpha = canvas.alpha;
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
ctx.scale(canvas.scaleX, canvas.scaleY);
|
||||
ctx.rotate(canvas.rotate);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(75 + 50 * Math.cos(0),
|
||||
75 - 50 * Math.sin(Math.PI*2));
|
||||
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
|
||||
ctx.moveTo(75,70);
|
||||
ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise)
|
||||
ctx.moveTo(60,65);
|
||||
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
|
||||
ctx.moveTo(90 + 5 * Math.cos(0),
|
||||
65 - 5 * Math.sin(Math.PI*2));
|
||||
ctx.moveTo(90,65);
|
||||
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
|
||||
ctx.closePath();
|
||||
if (canvas.fill)
|
||||
ctx.fill();
|
||||
if (canvas.stroke)
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
onPaint: {
|
||||
var ctx = canvas.getContext('2d');
|
||||
var originX = 85
|
||||
var originY = 75
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(originX, originX);
|
||||
ctx.globalAlpha = canvas.alpha;
|
||||
ctx.strokeStyle = canvas.strokeStyle;
|
||||
ctx.fillStyle = canvas.fillStyle;
|
||||
ctx.lineWidth = canvas.lineWidth;
|
||||
|
||||
ctx.translate(originX, originY)
|
||||
ctx.scale(canvas.scale, canvas.scale);
|
||||
ctx.rotate(canvas.rotate);
|
||||
ctx.translate(-originX, -originY)
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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"}
|
||||
}
|
||||
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"}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,114 +40,111 @@
|
|||
|
||||
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:"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();
|
||||
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"}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,89 +40,95 @@
|
|||
|
||||
import QtQuick 2.0
|
||||
import "../contents"
|
||||
import "../../shared"
|
||||
import "tiger.js" as Tiger
|
||||
|
||||
Item {
|
||||
id:container
|
||||
width:320
|
||||
height:480
|
||||
id: container
|
||||
width: 320
|
||||
height: 480
|
||||
|
||||
Column {
|
||||
spacing:5
|
||||
anchors.fill:parent
|
||||
Text { font.pointSize:15; text:"Tiger with SVG path"; anchors.horizontalCenter:parent.horizontalCenter}
|
||||
Column {
|
||||
spacing: 6
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
|
||||
Canvas {
|
||||
id:canvas
|
||||
width:320
|
||||
height:280
|
||||
antialiasing: true
|
||||
property string strokeStyle:"steelblue"
|
||||
property string fillStyle:"yellow"
|
||||
property bool fill:true
|
||||
property bool stroke:true
|
||||
property real alpha:alphaCtrl.value
|
||||
property real scaleX : scaleXCtrl.value
|
||||
property real scaleY : scaleYCtrl.value
|
||||
property real rotate : rotateCtrl.value
|
||||
property int frame:0
|
||||
|
||||
onFillChanged: requestPaint();
|
||||
onStrokeChanged: requestPaint();
|
||||
onAlphaChanged: requestPaint();
|
||||
onScaleXChanged: requestPaint();
|
||||
onScaleYChanged: requestPaint();
|
||||
onRotateChanged: requestPaint();
|
||||
|
||||
onPainted : {
|
||||
canvas.frame++;
|
||||
if (canvas.frame < Tiger.tiger.length)
|
||||
requestPaint();
|
||||
Text {
|
||||
font.pointSize: 24
|
||||
font.bold: true
|
||||
text: "Tiger with SVG path"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: "#777"
|
||||
}
|
||||
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]
|
||||
for (var i = 0; i < canvas.frame && i < Tiger.tiger.length; i++) {
|
||||
if (Tiger.tiger[i].width != undefined)
|
||||
ctx.lineWidth = Tiger.tiger[i].width;
|
||||
Canvas {
|
||||
id: canvas
|
||||
width: 320
|
||||
height: 280
|
||||
antialiasing: true
|
||||
|
||||
if (Tiger.tiger[i].path != undefined)
|
||||
ctx.path = Tiger.tiger[i].path;
|
||||
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
|
||||
|
||||
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();
|
||||
onFillChanged: requestPaint();
|
||||
onStrokeChanged: requestPaint();
|
||||
onAlphaChanged: requestPaint();
|
||||
onScaleChanged: requestPaint();
|
||||
onRotateChanged: requestPaint();
|
||||
|
||||
onPaint: {
|
||||
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 {
|
||||
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"}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,73 +42,75 @@
|
|||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 887 B |
|
|
@ -1,3 +1,4 @@
|
|||
Button 2.0 Button.qml
|
||||
LauncherList 2.0 LauncherList.qml
|
||||
SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml
|
||||
Slider 2.0 Slider.qml
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue