Tôi đang tạo đồng hồ hẹn giờ có thể đặt thời gian bằng cách kéo bàn tay đồng hồ (sử dụng đầu vào hoặc chuột cảm ứng). Với mục đích này, tôi đã xác định một yếu tố AnalogClockHand như hình dưới đây,Làm cách nào để xoay hình chữ nhật qml bằng cách kéo?
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 }
}
}
}
Trong tập tin QML chính, tôi đã sử dụng yếu tố này và thêm một mouseArea với nó như hình dưới đây,
chính QML tập
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;
}
}
}
Logic này là tuy nhiên không hoạt động bình thường và rất dễ bong tróc. Vì vậy, người ta không thể đặt thời gian trôi chảy. Vào cuối ngày, tôi đang cố gắng thực hiện một cái gì đó như thể hiện trong hình dưới đây. Người dùng có thể di chuyển giờ, phút hoặc giây để đặt thời gian.
Có một logic mã tốt hơn mà tôi có thể triển khai không?
Lưu ý 1: Tôi nhận ra rằng bàn tay thứ hai là rất nhỏ trong hình ảnh, nhưng điều đó cần được khắc phục sớm.