如何为QML Text元素添加偏移/描边效果？

QML的Text组件本身没有内置描边属性，以下是几种实用的实现方案，按需选择：

1. 多层Text叠加（简单场景首选） #

通过叠加多个Text元素，底层作为描边层并设置偏移，上层显示原文字。实现成本低，性能优异。

Item {
    width: 200
    height: 50

    // 描边层（底层）
    Text {
        text: "Hello QML"
        color: "#000000"
        font.pixelSize: 32
        anchors.centerIn: parent
        x: 1  // 水平偏移量，控制描边粗细
        y: 1  // 垂直偏移量
    }

    // 原文字层（上层）
    Text {
        text: "Hello QML"
        color: "#ffffff"
        font.pixelSize: 32
        anchors.centerIn: parent
    }
}

• 优点：代码简单易维护，无需额外依赖，性能最优；
• 缺点：描边粗细受偏移量限制，复杂描边需要叠加更多层，文字内容需保持同步。

2. ShaderEffect实现自定义描边（复杂效果首选） #

通过自定义着色器实现可调节粗细的描边效果，灵活性极高，适合需要精细控制的场景。

ShaderEffect {
    width: textItem.width
    height: textItem.height
    anchors.centerIn: parent

    property variant source: textItem
    property color borderColor: "#000000"
    property real borderWidth: 2.0

    fragmentShader: "
        uniform sampler2D source;
        uniform lowp vec4 borderColor;
        uniform highp float borderWidth;
        uniform highp vec2 sourceSize;
        varying highp vec2 qt_TexCoord0;

        void main() {
            lowp vec4 color = texture2D(source, qt_TexCoord0);
            highp vec2 offset = vec2(borderWidth / sourceSize.x, borderWidth / sourceSize.y);

            // 采样上下左右四个方向的像素，判断描边区域
            lowp float alphaSum = color.a;
            alphaSum += texture2D(source, qt_TexCoord0 + offset).a;
            alphaSum += texture2D(source, qt_TexCoord0 - offset).a;
            alphaSum += texture2D(source, qt_TexCoord0 + vec2(offset.x, -offset.y)).a;
            alphaSum += texture2D(source, qt_TexCoord0 + vec2(-offset.x, offset.y)).a;

            if (alphaSum > 0.0 && color.a < 1.0) {
                gl_FragColor = borderColor;
            } else {
                gl_FragColor = color;
            }
        }
    "

    Text {
        id: textItem
        text: "Hello QML"
        color: "#ffffff"
        font.pixelSize: 32
        visible: false  // 仅作为Shader的纹理源
    }
}

• 优点：可自由调节描边粗细、颜色，支持复杂视觉效果；
• 缺点：需要基础的GLSL着色器知识，性能略低于多层Text，但日常场景可忽略。

3. Canvas绘制（动态/特殊场景） #

使用Canvas API直接绘制带描边的文字，适合需要动态生成文本或自定义绘制逻辑的场景。

Canvas {
    width: 200
    height: 50
    anchors.centerIn: parent

    onPaint: {
        const ctx = getContext("2d");
        ctx.clearRect(0, 0, width, height);
        
        // 配置描边和填充样式
        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 2;
        ctx.fillStyle = "#ffffff";
        ctx.font = "32px Arial";
        
        // 先描边再填充，实现带描边的文字
        ctx.strokeText("Hello QML", 20, 35);
        ctx.fillText("Hello QML", 20, 35);
    }
}

• 优点：完全自定义绘制逻辑，支持各种文本特效；
• 缺点：文本布局需手动处理，不支持Text组件的自动换行、对齐等内置功能。

最优方案选择 #

• 简单偏移/细描边：优先用多层Text叠加，高效易维护；
• 可变粗细描边/复杂效果：选择ShaderEffect，兼顾灵活性与性能；
• 动态绘制/特殊文本处理：考虑Canvas。

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