通过拖动指针“现在几点”答案

【问题标题】："What time is it" by dragging the pointer通过拖动指针“现在几点”
【发布时间】：2021-04-06 18:55:46
【问题描述】：

我正在尝试实现一个用 Qt 编写的小型教学程序，它使用 QML，因为我正在并行学习。

我想知道是否可以在时钟指针的循环拖动过程中获得实时。你会建议从 Qt 的“自定义表盘”开始吗？

它只是一个带有小时指针的时钟（间隔为 1 小时）。

【问题讨论】：

我不建议自定义 Dial，因为它的固定角度范围限制为 -140 到 140。您需要 360 度的旋转，它本身不会在任何地方开始或停止。因此，IMO 你需要一个完全自定义的实现。
任务可以很容易地实现为自定义项。根据我的经验，这将花费更少的时间，并且工作得更快、更稳定。定制一些现成的物品不会那么灵活。特别是如果所有这些都是出于培训目的。
非常感谢您的回复。是的。我需要指针捕捉到每个小时的间隔。这正是我想要做的。

标签： qt qml drag snapping mousearea

【解决方案1】：

我正在尝试自定义下面的代码，以便将处理程序置于圆圈之外，并在可能的情况下将其替换为具有三角形形状的 svg 图像。将间隔切换为 1 小时而不是秒也将是一个挑战。到目前为止还没有工作...... :)

import QtQuick 2.0

Rectangle{
    id: root;
    width: 720;
    height: 480;
    color: "black";

    Item {
        id: container;
        width: 250;
        height: width;
        anchors.centerIn: parent;

        property real centerX : (width / 2);
        property real centerY : (height / 2);

        Rectangle{
            id: rect;
            color: "white";
            transformOrigin: Item.Center;
            radius: (width / 2);
            antialiasing: true;
            anchors.fill: parent;

            Rectangle {
                id: handle;
                color: "red";
                width: 50;
                height: width;
                radius: (width / 2);
                antialiasing: true;
                anchors {
                    top: parent.top;
                    margins: 10;
                    horizontalCenter: parent.horizontalCenter;
                }

                MouseArea{
                    anchors.fill: parent;
                    onPositionChanged:  {
                        var point =  mapToItem (container, mouse.x, mouse.y);
                        var diffX = (point.x - container.centerX);
                        var diffY = -1 * (point.y - container.centerY);
                        var rad = Math.atan (diffY / diffX);
                        var deg = (rad * 180 / Math.PI);
                        if (diffX > 0 && diffY > 0) {
                            rect.rotation = 90 - Math.abs (deg);
                        }
                        else if (diffX > 0 && diffY < 0) {
                            rect.rotation = 90 + Math.abs (deg);
                        }
                        else if (diffX < 0 && diffY > 0) {
                            rect.rotation = 270 + Math.abs (deg);
                        }
                        else if (diffX < 0 && diffY < 0) {
                            rect.rotation = 270 - Math.abs (deg);
                        }
                    }
                }
            }
        }
        Text {
            text: "%1 secs".arg (Math.round (rect.rotation / 6));
            font {
                pixelSize: 20;
                bold: true;
            }
            anchors.centerIn: parent;
        }
    }
}

【讨论】：