Improve scalebar rendering by moving to shapes

src/qml/ScaleBar.qml

@@ -1,90 +1,85 @@
 import QtQuick 2.14
+import QtQuick.Shapes 1.14
 
 import org.qfield 1.0
 import org.qgis 1.0
 import Theme 1.0
 
 Item {
+  id: scaleBar
+
   property alias mapSettings: measurement.mapSettings
   property double lineWidth: 2
 
+  height: childrenRect.height
+
   ScaleBarMeasurement {
       id: measurement
       project: qgisProject
       referenceScreenLength: 300
   }
 
-  Rectangle {
-    id: mainLineBackground
-    width: measurement.screenLength + 2
-    height: lineWidth + 2
-    color: "#AAFFFFFF"
-  }
-
-  Rectangle {
-    width: lineWidth + 2
-    height: ( 3 * lineWidth ) + 1
-    color: "#AAFFFFFF"
-    anchors.left: mainLineBackground.left
-    anchors.bottom: mainLineBackground.top
-  }
-
-  Rectangle {
-    width: lineWidth + 2
-    height: ( 3 * lineWidth ) + 1
-    color: "#AAFFFFFF"
-    anchors.right: mainLineBackground.right
-    anchors.bottom: mainLineBackground.top
-  }
-
-  Rectangle {
-    id: mainLine
-    width: measurement.screenLength
-    height: lineWidth
-    color: Theme.darkGray
-    anchors {
-        horizontalCenter: mainLineBackground.horizontalCenter
-        verticalCenter: mainLineBackground.verticalCenter
-    }
-  }
-
-  Rectangle {
-    width: lineWidth
-    height: 3 * lineWidth
-    color: Theme.darkGray
-    anchors.left: mainLine.left
-    anchors.bottom: mainLine.top
-  }
-
-  Rectangle {
-    width: lineWidth
-    height: 3 * lineWidth
-    color: Theme.darkGray
-    anchors.right: mainLine.right
-    anchors.bottom: mainLine.top
-  }
-
   Text {
     id: label
-    anchors.bottomMargin: 7
-    anchors.bottom: mainLine.top
-    anchors.horizontalCenter: mainLine.horizontalCenter
-    anchors.left: undefined // The value will be set to mainLine.left is the label is wider than the mainLine
+    anchors.horizontalCenter: bar.horizontalCenter
+    anchors.left: undefined
     font: Theme.defaultFont
     color: Theme.darkGray
-
     style: Text.Outline
-    styleColor: "#AAFFFFFF"
+    styleColor: "#CCFFFFFF"
 
     states: State {
-        name: "narrow"; when: label.width > mainLine.width
+        name: "narrow"; when: label.width > bar.width
         AnchorChanges {
             target: label
             anchors.horizontalCenter: undefined
-            anchors.left: mainLine.left
+            anchors.left: bar.left
         }
     }
 
     text: measurement.label
   }
+
+  Shape {
+    id: bar
+    anchors.top: label.bottom
+    anchors.topMargin: 2
+    width: measurement.screenLength
+    height: 8
+
+    ShapePath {
+      strokeWidth: barLine.strokeWidth + 1.5
+      strokeColor: "#CCFFFFFF"
+      fillColor: "transparent"
+      startX: 0; startY: 0
+
+      PathLine {
+        x: 0; y: bar.height
+      }
+      PathLine {
+        x: measurement.screenLength; y: bar.height
+      }
+      PathLine {
+        x: measurement.screenLength; y: 0
+      }
+    }
+
+    ShapePath {
+      id: barLine
+      strokeWidth: scaleBar.lineWidth
+      strokeColor: "#000000"
+      fillColor: "transparent"
+      startX: 0; startY: 0
+
+      PathLine {
+        x: 0; y: bar.height
+      }
+      PathLine {
+        x: measurement.screenLength; y: bar.height
+      }
+      PathLine {
+        x: measurement.screenLength; y: 0
+      }
+    }
+  }
 }