Time for action – adding needles to the clock
The next step is to add the hour, minute, and second needles to the clock. Let's start by creating a new component called Needle in a file called Needle.qml (remember that component names and files representing them need to start with a capital letter):
import QtQuick 2.0
Rectangle {
id: root
property int value: 0
property int granularity: 60
property alias length: root.height
width: 2
height: parent.height/2
radius: width/2
antialiasing: true
anchors.bottom: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
transformOrigin: Item.Bottom
rotation: 360/granularity * (value % granularity)
}
Needle is basically a rectangle anchored to the center of its parent by its bottom edge, which is also the item's pivot. It also has value and granularity properties driving the rotation of the item, where value is the current value the needle shows and granularity is the number of different values...