diff options
Diffstat (limited to 'examples/quick/canvas/bezierCurve/bezierCurve.qml')
-rw-r--r-- | examples/quick/canvas/bezierCurve/bezierCurve.qml | 146 |
1 files changed, 75 insertions, 71 deletions
diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml index 386d1d73d3..281ca9399e 100644 --- a/examples/quick/canvas/bezierCurve/bezierCurve.qml +++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml @@ -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"} + } } |