qml 带有自定义圆角边框的矩形

Question

因此需要带有自定义圆角的 qml 矩形。我最终用形状、路径线、路径弧和一些数学知识制作了一个。

不知何故，我的圆弧/圆角不像具有半径属性的矩形那样尖锐/精细。 我如何使这些角更精细？

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

        Shape {

             ShapePath {

                strokeWidth: 5
                strokeColor: root.color
                startX: root.leftTopCornerRadius > 0 ? root.leftTopCornerRadius : 0
                startY: 0
                fillColor: "transparent"
                capStyle: ShapePath.RoundCap
                 fillRule:ShapePath.WindingFill

                PathLine { y: 0; x:root.width - root.rightTopCornerRadius}
                PathArc {
                    x: root.width; y: root.rightTopCornerRadius
                    radiusX: root.rightTopCornerRadius; radiusY: root.rightTopCornerRadius

                }

                PathLine { x:root.width; y:root.height - root.rightBottomCornerRadius}
                PathArc {
                    x:root.width - root.rightBottomCornerRadius; y: root.height
                    radiusX: root.rightBottomCornerRadius; radiusY: root.rightBottomCornerRadius
                }

                PathLine { x:root.leftBottomCornerRadius; y:root.height}
                PathArc {
                    x:0; y: root.height - root.leftBottomCornerRadius
                    radiusX: root.leftBottomCornerRadius; radiusY: root.leftBottomCornerRadius
                }

                PathLine { x:0; y:root.leftTopCornerRadius}
                PathArc {
                    x:root.leftTopCornerRadius; y: 0
                    radiusX: root.leftTopCornerRadius; radiusY: root.leftTopCornerRadius
                }
            }
        }
    }
}

在其他地方 带有非常精细边框的圆角普通矩形。

Rectangle {
       anchors.centerIn: parent
       width: 300
       height: 300
       radius: 30
       border.width: 5
    }

我尝试使用一些共享属性，但没有任何帮助。 像 joinstyle、capstyle、fillrule

Answer 1

好的，有几种选择可以做到这一点。首先，您必须打开 QtQuick 多重采样。将以下行添加到您的 main.cpp 中：

QGuiApplication app(argc, argv);

QSurfaceFormat format;                       //
format.setSamples(8);                        //  add these lines, change the value if needed
QSurfaceFormat::setDefaultFormat(format);    // 

QQmlApplicationEngine engine;

然后你可以玩 Item.antialiasing 和 Item.smooth 属性

Shape

.

除此之外，我建议使用QQuickItem派生来编写自定义项目，以

Rectangle

sources为例。

这里有 2 张图片：你的

Shapes

有 8 个样本，

antialiasing: true

，

smooth: true

，以及带有默认设置的常见

Rectangle

：