From 61022aa56866636c00b9b3aff3d3106b9ef64419 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Fri, 17 Sep 2010 13:07:38 +0200 Subject: Update example --- examples/painting/Drawing.qml | 8 +------- examples/painting/painting.qml | 24 +++++++++++++++++++----- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/examples/painting/Drawing.qml b/examples/painting/Drawing.qml index a19da45..f0f39a2 100644 --- a/examples/painting/Drawing.qml +++ b/examples/painting/Drawing.qml @@ -10,6 +10,7 @@ Canvas { property int count: 0 property int lineWidth: 2 property variant drawColor: "black" + property variant ctx: getContext("2d"); MouseArea { id:mousearea @@ -25,8 +26,6 @@ Canvas { } function drawLineSegment() { - var ctx = getContext(); - ctx.save(); ctx.beginPath(); ctx.strokeStyle = drawColor ctx.lineWidth = lineWidth @@ -34,20 +33,15 @@ Canvas { ctx.lineTo(mousearea.mouseX, mousearea.mouseY); ctx.stroke(); ctx.closePath(); - ctx.restore(); } function drawPoint() { - var ctx = getContext(); - ctx.save(); ctx.lineWidth = lineWidth ctx.fillStyle = drawColor ctx.fillRect(mousearea.mouseX, mousearea.mouseY, 2, 2); - ctx.restore(); } function clear() { - var ctx = getContext(); ctx.clearRect(0, 0, width, height); } } diff --git a/examples/painting/painting.qml b/examples/painting/painting.qml index d691834..9aa8ee4 100644 --- a/examples/painting/painting.qml +++ b/examples/painting/painting.qml @@ -39,6 +39,7 @@ Rectangle { anchors.fill: parent delegate: idelegate model: model + cacheBuffer: 20 } } @@ -49,12 +50,25 @@ Rectangle { width:120 height:142 anchors.horizontalCenter: parent.horizontalCenter - Image { + Canvas { + width: 140 + height: 140 + canvasWidth:width + canvasHeight:height + color: "#222" smooth:true - width:140 fillMode: Image.PreserveAspectFit anchors.centerIn: parent - source: src + onInit: { + var ctx = getContext("2d"); + // Here we copy contents from drawing and apply drop shaddow + var img = canvas.toImage(); + ctx.shadowOffsetX = 4; + ctx.shadowOffsetY = 4; + ctx.shadowBlur = 20; + ctx.shadowColor = "red"; + ctx.drawImage(img, 25, 25, width-50, height-50); + } } ListView.onAdd:NumberAnimation{target: root; property: "opacity" ; from:0; to:1; duration:500} } @@ -94,8 +108,8 @@ Rectangle { MouseArea { anchors.fill:parent onClicked: { - var name = "canvas" + canvas.count++ +".png"; - canvas.save("examples/painting/"+name); + var name = "canvas" + (++canvas.count) +".png"; + canvas.save(name); model.append({src:name}); view.currentIndex = model.count-1 } -- cgit v1.2.3