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...