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

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

Get Game Programming using Qt 5 Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.