QML Dial组件刻度标签水平对齐实现求助

问题分析 #

标签倾斜的核心原因是绘制文本时对Canvas上下文应用了旋转变换，导致文本跟随角度偏转。要让标签保持水平显示，关键是取消文本的旋转操作，通过坐标计算直接将水平文本定位到Dial周围的对应位置。

修改后的完整代码示例 #

以下是调整后的完整QML代码，包含Dial和修正后的Canvas绘制逻辑：

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: 200
    height: 200

    Dial {
        id: dial
        anchors.centerIn: parent
        width: 120
        height: 120
        from: 0
        to: 3
        stepSize: 1
        value: 0
    }

    Canvas {
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            
            const centerX = width / 2;
            const centerY = height / 2;
            // 标签与Dial中心的距离（可按需调整）
            const labelRadius = dial.width / 2 + 25;
            const labels = ["1s", "1m", "10m", "1h"];
            // 对应Dial四个档位的角度（0度为右侧，顺时针递增）
            const angles = [0, 90, 180, 270];

            ctx.font = "14px sans-serif";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = "#333";

            for (let i = 0; i < labels.length; i++) {
                const radian = angles[i] * Math.PI / 180;
                // 计算标签的绝对坐标
                let textX = centerX + labelRadius * Math.cos(radian);
                let textY = centerY + labelRadius * Math.sin(radian);

                // 可选：根据方向微调位置，避免标签与Dial重叠
                const textWidth = ctx.measureText(labels[i]).width;
                switch (angles[i]) {
                    case 0: // 右侧
                        textX += textWidth / 2 + 5;
                        break;
                    case 180: // 左侧
                        textX -= textWidth / 2 + 5;
                        break;
                    case 90: // 顶部
                        textY -= textWidth / 2 + 5;
                        break;
                    case 270: // 底部
                        textY += textWidth / 2 + 5;
                        break;
                }

                // 直接绘制水平文本，无旋转
                ctx.fillText(labels[i], textX, textY);
            }
        }
    }
}

关键修改点 #

• 移除了Canvas上下文的rotate()调用，彻底避免文本随角度旋转
• 通过三角函数Math.cos()和Math.sin()计算每个标签的绝对坐标，确保标签精准定位在Dial周围的对应方向
• 添加可选的位置微调逻辑，让标签与Dial保持合适间距，避免边缘重叠
• 保留textAlign: center和textBaseline: middle属性，确保标签在目标位置居中对齐，视觉更整齐

角度适配说明 #

如果你的Dial起始角度不是右侧（比如0度在顶部），只需调整angles数组的数值即可：

• 顶部对应角度：90
• 左侧对应角度：180
• 底部对应角度：270
• 右侧对应角度：0

内容的提问来源于stack exchange，提问作者abbas akbarzade