From f289fdc53e85bf0f2002070fa883f5c01bae1232 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Sun, 24 Feb 2013 15:47:38 +0100 Subject: Various improvements to Canvas examples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I noticed these examples were rather "aestetically challenged" and decided to make it a test case for our WIP style guidelines. - Use consistent margins (12 px) - Use proposed color palettes - Use proposed fonts and header styles I created a new Slider graphic and moved this into the shared folder as I think it is useful for other examples. I removed a lot of unused files which seem to have been added but never actually used. I also found several bugs in our implementation, including not scaling or rotation around the correct origin. In many cases I simplified the examples, removing variables/sliders where they did not add significantly to the example itself. Change-Id: Ie09da33deaf56a3ec45a2031b87a24a8602e994a Reviewed-by: Samuel Rødal Reviewed-by: Jerome Pasion Reviewed-by: Jens Bache-Wiig --- examples/quick/canvas/squircle/squircle.qml | 207 ++++++++++++++-------------- 1 file changed, 102 insertions(+), 105 deletions(-) (limited to 'examples/quick/canvas/squircle/squircle.qml') diff --git a/examples/quick/canvas/squircle/squircle.qml b/examples/quick/canvas/squircle/squircle.qml index 3044816479..4e5c5a49fc 100644 --- a/examples/quick/canvas/squircle/squircle.qml +++ b/examples/quick/canvas/squircle/squircle.qml @@ -40,114 +40,111 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 - - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Squircles"; anchors.horizontalCenter:parent.horizontalCenter} - Image { - anchors.horizontalCenter:parent.horizontalCenter - source:"squircle.png" - width:250 - height:25 - } - Canvas { - id:canvas - width:320 - height:250 - antialiasing: true - - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:2 - property int nSize:nCtrl.value - property real radius:rCtrl.value - property bool fill:true - property bool stroke:false - property real px:xCtrl.value - property real py:yCtrl.value - property real alpha:alphaCtrl.value - - onAlphaChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onLineWidthChanged:requestPaint(); - onNSizeChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onPxChanged:requestPaint(); - onPyChanged:requestPaint(); - - - onPaint: squcirle(); - - function squcirle() { - var ctx = canvas.getContext("2d"); - var N = canvas.nSize; - var R = canvas.radius; - - N=Math.abs(N); - var M=N; - if (N>100) M=100; - if (N<0.00000000001) M=0.00000000001; - - ctx.save(); - ctx.globalAlpha =canvas.alpha; - ctx.fillStyle = "gray"; - ctx.fillRect(0, 0, canvas.width, canvas.height); - - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - - ctx.beginPath(); - var i = 0, x, y; - for (i=0; i<(2*R+1); i++){ - x = Math.round(i-R) + canvas.px; - y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; - - if (i == 0) - ctx.moveTo(x, y); - else - ctx.lineTo(x, y); - } - - for (i=(2*R); i<(4*R+1); i++){ - x =Math.round(3*R-i)+canvas.px; - y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; - ctx.lineTo(x, y); - } - ctx.closePath(); - if (canvas.stroke) { - ctx.stroke(); - } - - if (canvas.fill) { - ctx.fill(); - } - - ctx.fillStyle = "yellow"; - ctx.font = "Helvetica 16px"; - ctx.fillText("|X-" + Math.round(canvas.px) + "|^" + N + " + |Y-"+Math.round(canvas.py)+"|^" + N + " = |" + Math.round(R) + "|^" + N, canvas.px - 125, canvas.py); - ctx.restore(); + id: container + width: 320 + height: 480 + + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Squircles" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" } - } - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"} - Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"} - Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"} - Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "squircle.png" + width: 250 + height: 25 } + + Canvas { + id: canvas + width: 320 + height: 250 + antialiasing: true + + property color strokeStyle: Qt.darker(fillStyle, 1.2) + property color fillStyle: "#6400aa" + + property int lineWidth: 2 + property int nSize: nCtrl.value + property real radius: rCtrl.value + property bool fill: true + property bool stroke: false + property real px: width/2 + property real py: height/2 + 10 + property real alpha: 1.0 + + onRadiusChanged: requestPaint(); + onLineWidthChanged: requestPaint(); + onNSizeChanged: requestPaint(); + onFillChanged: requestPaint(); + onStrokeChanged: requestPaint(); + + onPaint: squcirle(); + + function squcirle() { + var ctx = canvas.getContext("2d"); + var N = canvas.nSize; + var R = canvas.radius; + + N=Math.abs(N); + var M=N; + if (N>100) M=100; + if (N<0.00000000001) M=0.00000000001; + + ctx.save(); + ctx.globalAlpha =canvas.alpha; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.beginPath(); + var i = 0, x, y; + for (i=0; i<(2*R+1); i++){ + x = Math.round(i-R) + canvas.px; + y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; + + if (i == 0) + ctx.moveTo(x, y); + else + ctx.lineTo(x, y); + } + + for (i=(2*R); i<(4*R+1); i++){ + x =Math.round(3*R-i)+canvas.px; + y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; + ctx.lineTo(x, y); + } + ctx.closePath(); + if (canvas.stroke) { + ctx.stroke(); + } + + if (canvas.fill) { + ctx.fill(); + } + ctx.restore(); + } + } + + } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: nCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "N"} + Slider {id: rCtrl ; min: 30 ; max: 180 ; init: 60 ; name: "Radius"} } - } } -- cgit v1.2.3