Beziered slider

locusf · Oct 23, 2013 · b72b851 · b72b851
1 parent c91c014
commit b72b851
Showing 1 changed file with 37 additions and 35 deletions.
diff --git a/src/styles/SliderStyle.qml b/src/styles/SliderStyle.qml
@@ -26,41 +26,43 @@ SliderStyle {
         id: grooveStyle
     }
 
-    handle:
-        Rectangle {
-            width: control.value < 0.8 ? (control.pressed ? 62 : 80) : 43
-            height: control.value < 0.8 ? 32 : (55*control.value)
-            color: "transparent"
-            Image {
-                id:trumpet
-                height: control.value < 0.8 ? 32 : (60*control.value)
-                source: control.value < 0.8 ? (control.pressed ? "images/slider-trumpet-stretch.png" : "images/slider-trumpet.png") : "images/slider-trumpet-up.png"
-                z: 0
-                visible: control.enabled
-            }
-            Rectangle {
-                anchors.horizontalCenter: control.value < 0.8 ? parent.right : parent.horizontalCenter
-                anchors.verticalCenter: control.value < 0.8 ? parent.verticalCenter : parent.top
-                width: ball.width
-                height: ball.height
-                color: "transparent"
-                Image {
-                    anchors.horizontalCenter: control.value < 0.8 ? parent.right : parent.horizontalCenter
-                    anchors.verticalCenter: control.value < 0.8 ? parent.verticalCenter : parent.top
-                    id: ball
-                    source: "images/slider-ball.png"
-                    z: 1
-                    visible: control.enabled
-                    Text {
-                        anchors.centerIn: parent
-                        text: parseInt(control.value*100)
-                        font.pixelSize: 25
-                        color: Theme.textField.selectedTextColor
-                        z: 2
-                        visible: control.enabled
-                    }
-                }
-            }
+    Image {
+        id: ball
+        source: "images/slider-ball.png"
+        z: 1
+        visible: control.enabled
+    }
+    handle: Canvas {
+        id: canvas
+        width: 85
+        height: 32
+        property color strokeStyle: Theme.groove.foreground
+        property color fillStyle: Theme.groove.foreground
+        property bool fill: true
+        property bool stroke: true
+        property real alpha: 1.0
+        antialiasing: true
+
+        onPaint: {
+            var ctx = canvas.getContext('2d');
+            ctx.save();
+            ctx.beginPath();
+            ctx.lineWidth = 1;
+            ctx.moveTo(0,8);
+            ctx.bezierCurveTo(0, 8, 0, 8, 0, 8);
+            ctx.bezierCurveTo(55, 8, 55, 8, 55, 8);
+            ctx.bezierCurveTo(85, 0, 85, 0, 85, 0);
+            ctx.bezierCurveTo(85, 32, 85, 32, 85, 32);
+            ctx.bezierCurveTo(55, 25, 55, 25, 55, 25);
+            ctx.bezierCurveTo(0, 24, 0, 24, 0, 24);
+            ctx.closePath();
+            ctx.fill();
+            /*ctx.drawImage(ball, 40, 0);*/
+            ctx.fillStyle="white";
+            ctx.font="Bold 12px";
+            ctx.fillText(parseInt(control.value*100), 40, 0);
+            ctx.restore();
         }
+    }
     groove: grooveStyle;
 }