時計の針をドラッグして(タッチ入力またはマウスを使用して)時間を設定できる時計タイマーを作成しています。この目的のために、以下に示すように AnalogClockHand 要素を定義しました。
AnalogClockHand.qml
Rectangle {
id: hand
property alias rotationAngle: handRotation.angle
x: (parent.width / 2) - (width / 2); y: (parent.height / 2) - height; z: 2
width: units.gu(1); height: units.gu(14);
radius: units.gu(1)
color: Constants.coolGrey
antialiasing: true
transform: Rotation {
id: handRotation
origin { x: hand.width / 2; y: hand.height }
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.3; modulus: 360 }
}
}
}
メインの qml ファイルでは、この要素を使用して、以下に示すように mouseArea を追加しました。
メインの Qml ファイル
AnalogClockHand {
id: secondHand
z: parent.z - 1;
height: units.gu(17); width: units.gu(0.5)
rotationAngle: seconds * 6;
antialiasing: true;
// Implements touch support
MouseArea {
id: timerbackmousearea
property real truex: mouseX - parent.width/2
property real truey: parent.height/2 - mouseY
property real angle: Math.atan2(truex, truey)
property real strictangle: parseInt(angle * 180 / Math.PI)
property real modulo: strictangle % 6
anchors.fill: parent
preventStealing: true
onPositionChanged: if (timerbackmousearea.angle < 0) {
secondHand.rotationAngle = strictangle - modulo + 360;
timerValue = parseInt(secondHand.rotationAngle/6);
seconds = timerValue;
}
else {
secondHand.rotationAngle = strictangle - modulo + 6;
timerValue = parseInt(secondHand.rotationAngle/6);
seconds = timerValue;
}
}
}
ただし、このロジックは適切に機能しておらず、非常に不安定です。そのため、時間をスムーズに設定することはできません。結局のところ、下の画像に示すようなものを実装しようとしています。ユーザーは、時針、分針、または秒針を動かして時刻を設定できる必要があります。
私が実装できるより良いコードロジックはありますか?
注 1: 画像の秒針が非常に小さいことは認識していますが、すぐに修正する必要があります。