QML自定义圆角Shape实现的圆角不够精细，如何优化？

你的自定义Shape圆角不如Rectangle锐利，核心原因是路径偏移导致stroke被裁剪，以及PathArc默认参数可能绘制大圆弧而非小圆弧。以下是具体优化步骤和修正后的代码：

关键优化点 #

• 修正路径偏移：Rectangle的border将stroke宽度的一半放在元素边界内、一半在外，且整体尺寸包含border。你的原路径直接对齐Item边缘，stroke会向外超出Item范围被裁剪，导致圆角模糊。需将所有路径坐标向内偏移strokeWidth/2，让stroke外边缘刚好对齐Item边界。
• 强制绘制小圆弧：默认PathArc可能在某些场景下绘制大圆弧，需为每个PathArc指定sweepDirection: PathArc.Clockwise，确保生成锐利的小圆角。
• 优化路径衔接：添加joinStyle: ShapePath.RoundJoin，让直线与圆弧的衔接更平滑。

修正后的完整代码 #

Item {
    anchors.centerIn: parent
    id: root
    width: 300
    height: 300
    property string color: 'red'
    property int rightTopCornerRadius: 10
    property int rightBottomCornerRadius: 20
    property int leftBottomCornerRadius: 30
    property int leftTopCornerRadius: 40
    property int borderWidth: 5

    Shape {
        anchors.fill: parent // 确保Shape与Item尺寸一致，避免裁剪
        ShapePath {
            strokeWidth: root.borderWidth
            strokeColor: root.color
            fillColor: "transparent"
            capStyle: ShapePath.RoundCap
            joinStyle: ShapePath.RoundJoin
            fillRule: ShapePath.WindingFill

            // 计算偏移量，让stroke外边缘对齐Item边界
            readonly property real offset: strokeWidth / 2

            startX: offset + (root.leftTopCornerRadius > 0 ? root.leftTopCornerRadius : 0)
            startY: offset

            // 右上部分：直线 -> 圆弧
            PathLine {
                x: root.width - offset - root.rightTopCornerRadius
                y: offset
            }
            PathArc {
                x: root.width - offset
                y: offset + root.rightTopCornerRadius
                radiusX: root.rightTopCornerRadius
                radiusY: root.rightTopCornerRadius
                sweepDirection: PathArc.Clockwise
            }

            // 右下部分：直线 -> 圆弧
            PathLine {
                x: root.width - offset
                y: root.height - offset - root.rightBottomCornerRadius
            }
            PathArc {
                x: root.width - offset - root.rightBottomCornerRadius
                y: root.height - offset
                radiusX: root.rightBottomCornerRadius
                radiusY: root.rightBottomCornerRadius
                sweepDirection: PathArc.Clockwise
            }

            // 左下部分：直线 -> 圆弧
            PathLine {
                x: offset + root.leftBottomCornerRadius
                y: root.height - offset
            }
            PathArc {
                x: offset
                y: root.height - offset - root.leftBottomCornerRadius
                radiusX: root.leftBottomCornerRadius
                radiusY: root.leftBottomCornerRadius
                sweepDirection: PathArc.Clockwise
            }

            // 左上部分：直线 -> 圆弧
            PathLine {
                x: offset
                y: offset + root.leftTopCornerRadius
            }
            PathArc {
                x: offset + root.leftTopCornerRadius
                y: offset
                radiusX: root.leftTopCornerRadius
                radiusY: root.leftTopCornerRadius
                sweepDirection: PathArc.Clockwise
            }
        }
    }
}

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