From 71d22bc5737842f97d8fb222e000de2549825891 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Tue, 17 Aug 2010 18:41:09 +0200 Subject: Updated some examples --- examples/clock/clock.qml | 210 +++++++++++++++++++++------------------------ examples/simple/Spiro.qml | 47 ++++++++++ examples/simple/simple.qml | 22 +++++ 3 files changed, 167 insertions(+), 112 deletions(-) create mode 100644 examples/simple/Spiro.qml create mode 100644 examples/simple/simple.qml diff --git a/examples/clock/clock.qml b/examples/clock/clock.qml index a671d9c..27b7293 100644 --- a/examples/clock/clock.qml +++ b/examples/clock/clock.qml @@ -1,123 +1,109 @@ import "../../Canvas" import Qt 4.7 -Rectangle { - - width: 300; height: 200 - - Image { - id: bg - visible:false - source: "backdrop.png" +Canvas { + id: clock + width:150 + height:150 + + Timer { + interval: 1000; running: true; repeat: true + onTriggered: clock.updateCanvas() } - Canvas { - id: clock - width:200 - height:200 - - Timer { - interval: 1000; running: true; repeat: true - onTriggered: clock.updateCanvas() + onPaint : { + var now = new Date(); + ctx.save(); + ctx.drawLine + ctx.clearRect(0,0,150,150); + ctx.translate(75,75); + ctx.scale(0.4,0.4); + ctx.rotate(-Math.PI/2); + ctx.strokeStyle = "black"; + ctx.fillStyle = "white"; + ctx.lineWidth = 8; + ctx.lineCap = "round"; + + // Hour marks + ctx.save(); + ctx.beginPath(); + for (var i=0;i<12;i++){ + ctx.rotate(Math.PI/6); + ctx.moveTo(100,0); + ctx.lineTo(120,0); } - - onPaint : { - - var now = new Date(); - ctx.save(); - ctx.drawLine - ctx.clearRect(0,0,150,150); - ctx.translate(75,75); - ctx.scale(0.4,0.4); - ctx.rotate(-Math.PI/2); - ctx.strokeStyle = "black"; - ctx.fillStyle = "white"; - ctx.lineWidth = 8; - ctx.lineCap = "round"; - var bg = ctx.createImage("backdrop.png"); - ctx.drawImage(bg, 0, 0, 100, 100); - - // Hour marks - ctx.save(); - ctx.beginPath(); - for (var i=0;i<12;i++){ - ctx.rotate(Math.PI/6); - ctx.moveTo(100,0); + ctx.stroke(); + ctx.restore(); + + // Minute marks + ctx.save(); + ctx.lineWidth = 5; + ctx.beginPath(); + for (i=0;i<60;i++){ + if (i%5!=0) { // 5 minutes + ctx.moveTo(117,0); ctx.lineTo(120,0); } - ctx.stroke(); - ctx.restore(); - - // Minute marks - ctx.save(); - ctx.lineWidth = 5; - ctx.beginPath(); - for (i=0;i<60;i++){ - if (i%5!=0) { // 5 minutes - ctx.moveTo(117,0); - ctx.lineTo(120,0); - } - ctx.rotate(Math.PI/30); - } - ctx.stroke(); - ctx.restore(); - - var sec = now.getSeconds(); - var min = now.getMinutes(); - var hr = now.getHours(); - hr = hr>=12 ? hr-12 : hr; - - ctx.fillStyle = "black"; - - // write Hours - ctx.save(); - ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) - ctx.lineWidth = 14; - ctx.beginPath(); - ctx.moveTo(-20,0); - ctx.lineTo(80,0); - ctx.stroke(); - ctx.restore(); - - // write Minutes - ctx.save(); - ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) - ctx.lineWidth = 10; - ctx.beginPath(); - ctx.moveTo(-28,0); - ctx.lineTo(112,0); - ctx.stroke(); - ctx.restore(); - - // Write seconds - ctx.save(); - ctx.rotate(sec * Math.PI/30); - ctx.strokeStyle = "#D40000"; - ctx.fillStyle = "#D40000"; - ctx.lineWidth = 6; - ctx.beginPath(); - ctx.moveTo(-30,0); - ctx.lineTo(83,0); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(0,0,10,0,Math.PI*2,true); - ctx.fill(); - ctx.beginPath(); - ctx.arc(95,0,10,0,Math.PI*2,true); - ctx.stroke(); - ctx.fillStyle = "#555"; - ctx.arc(0,0,3,0,Math.PI*2,true); - ctx.fill(); - ctx.restore(); - - ctx.beginPath(); - ctx.lineWidth = 14; - ctx.strokeStyle = '#325FA2'; - ctx.arc(0,0,142,0,Math.PI*2,true); - ctx.stroke(); - - ctx.restore(); } + ctx.rotate(Math.PI/30); + } + ctx.stroke(); + ctx.restore(); + + var sec = now.getSeconds(); + var min = now.getMinutes(); + var hr = now.getHours(); + hr = hr>=12 ? hr-12 : hr; + + ctx.fillStyle = "black"; + + // write Hours + ctx.save(); + ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) + ctx.lineWidth = 14; + ctx.beginPath(); + ctx.moveTo(-20,0); + ctx.lineTo(80,0); + ctx.stroke(); + ctx.restore(); + + // write Minutes + ctx.save(); + ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(-28,0); + ctx.lineTo(112,0); + ctx.stroke(); + ctx.restore(); + + // Write seconds + ctx.save(); + ctx.rotate(sec * Math.PI/30); + ctx.strokeStyle = "#D40000"; + ctx.fillStyle = "#D40000"; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo(-30,0); + ctx.lineTo(83,0); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0,0,10,0,Math.PI*2,true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(95,0,10,0,Math.PI*2,true); + ctx.stroke(); + ctx.fillStyle = "#555"; + ctx.arc(0,0,3,0,Math.PI*2,true); + ctx.fill(); + ctx.restore(); + + ctx.beginPath(); + ctx.lineWidth = 14; + ctx.strokeStyle = '#325FA2'; + ctx.arc(0,0,142,0,Math.PI*2,true); + ctx.stroke(); + ctx.restore(); } - } + diff --git a/examples/simple/Spiro.qml b/examples/simple/Spiro.qml new file mode 100644 index 0000000..04e7aff --- /dev/null +++ b/examples/simple/Spiro.qml @@ -0,0 +1,47 @@ +import "../../Canvas" +import Qt 4.7 + +// Spirograph + +Canvas { + width:200 + height:200 + + property color color: "#ffee00" + + MouseArea { + id:mousearea + hoverEnabled:true + anchors.fill: parent + onPositionChanged: { updateCanvas(); } + } + + onPaint: { + ctx.strokeStyle = color; + ctx.translate((width/2), (height/2)); + ctx.rotate(mousearea.mouseY/width) + drawSpirograph(ctx,20*(2)/(1),-8*(3)/(1),mousearea.mouseX/2); + ctx.globalAlpha = 0.5; + drawSpirograph(ctx,20*(2)/(1),-8*(3)/(1),mousearea.mouseX/2 +10); + } + + function drawSpirograph(ctx,R,r,O){ + var x1 = R-O; + var y1 = 0; + var i = 1; + ctx.beginPath(); + ctx.moveTo(x1,y1); + do { + if (i>20000) break; + var fuzz = (i)*Math.PI/72; + var x2 = (R+r)*Math.cos(fuzz) - (r+O)*Math.cos(((R+r)/r)*(fuzz)) + var y2 = (R+r)*Math.sin(fuzz) - (r+O)*Math.sin(((R+r)/r)*(fuzz)) + ctx.lineTo(x2,y2); + x1 = x2; + y1 = y2; + i++; + } while (x2 != R-O && y2 != 0 ); + ctx.stroke(); + } +} + diff --git a/examples/simple/simple.qml b/examples/simple/simple.qml new file mode 100644 index 0000000..4f4982e --- /dev/null +++ b/examples/simple/simple.qml @@ -0,0 +1,22 @@ +import Qt 4.7 +import "../../Canvas" + +Grid { + columns:2 + spacing:0 + + Spiro { + color: "#eeaa44" + } + Spiro { + color: "#ee22ee" + } + Spiro { + color:"#dd2277" + } + Spiro { + color:"#cccc77" + } +} + + -- cgit v1.2.3