Обрезать детей пользовательского элемента qml после пользовательской формы

У меня есть обычай QQuickItem который я создал, и я хотел создать окно с закругленными углами. Итак, я реализовал QQuickPaintedItem и экспортируется в QML, Проблема заключается в том, что дочерние элементы элемента расширяются ограничивающим прямоугольником элемента, который является прямоугольником, а не скругленным прямоугольником, как я хочу. Вот как это выглядит:

введите описание изображения здесь

Вот мой код:

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2
import mycustomlib 1.0

Window {
id: wnd
width: 300
height: 280
visible: true
flags: Qt.FramelessWindowHint
color: "transparent"x: 250
y: 250

MyCustomWindow {
id: playerFrame
anchors.fill: parent
radius: 25

Rectangle {
color: "beige"anchors.margins: 5
anchors.fill: parent
}
}
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QUrl>

#include "mycustomwindow.h"
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);

qmlRegisterType<MyCustomWindow>("mycustomlib", 1, 0, "MyCustomWindow");

QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

return app.exec();
}

mycustomwindow.h

#ifndef MYCUSTOMWINDOW_H
#define MYCUSTOMWINDOW_H

#include <QQuickPaintedItem>

class MyCustomWindow : public QQuickPaintedItem
{
Q_OBJECT

Q_PROPERTY(int radius READ radius WRITE setRadius NOTIFY radiusChanged)

public:
MyCustomWindow(QQuickItem *parent = 0);

int radius() const;
void setRadius(int radius);

signals:
void radiusChanged();

protected:
virtual void paint(QPainter *pPainter) Q_DECL_OVERRIDE;

private:
int m_radius;
};

#endif // MYCUSTOMWINDOW_H

mycustomwindow.cpp

#include "mycustomwindow.h"
#include <QPainter>

MyCustomWindow::MyCustomWindow(QQuickItem *parent) :
QQuickPaintedItem(parent),
m_radius(0)
{
setAcceptedMouseButtons(Qt::AllButtons);
}

void MyCustomWindow::paint(QPainter *pPainter)
{
const QRect myRect(0, 0, width() - 1, height() - 1);
pPainter->fillRect(myRect, Qt::transparent);
pPainter->drawRoundedRect(myRect, m_radius, m_radius);
}

int MyCustomWindow::radius() const
{
return m_radius;
}

void MyCustomWindow::setRadius(int radius)
{
m_radius = radius;

emit radiusChanged();
}

То, что я хотел бы, это ребенок Rectangleподгоняется под мою собственную форму (которая в данном случае представляет собой прямоугольник со скругленными углами). Примерно так:

введите описание изображения здесь

Можно ли добиться чего-то подобного в QML?

0

Решение

Я не знаю, возможно ли это с QQuickPaintedItem (это следует делать, когда вы используете fill, а не только border), но без создания собственного QSGNode (очень хакерского) единственный способ — использовать OpacityMask:

Rectangle{
id: mask
width:100
height: 100
radius: 30
color: "red"border.color: "black"border.width: 1
}

Item {
anchors.fill: mask
layer.enabled: true
layer.effect: OpacityMask {
maskSource: mask
}
Rectangle {
anchors.fill: parent
anchors.margins: 5
color:"yellow"}
}

Что дает вам:

замаскированный и обрезанный прямоугольник

Но его использование будет потреблением GPU, так как внутренний элемент и маска должны сначала отображаться в буфере, а затем перерисовываться в окне, что не очень хорошо для старых мобильных или слабых встроенных устройств.

3

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]