title: Clip children of custom qml item after custom shape
body: <p>I have a custom <code>QQuickItem</code> which I created and I wanted to create a rounded cornered window. So I implemented a <code>QQuickPaintedItem</code> and exported to <code>QML</code>. The problem is that the item's children are expanding by the item's bounding rectangle, which is a rectangle and not a rounded rectangle like I want it. Here's how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/9tib3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9tib3.png" alt="enter image description here"></a></p>
  
  <p>Here is my code:</p>
  
  <p><strong>main.qml</strong></p>
  
  <pre><code>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
          }
      }
  }
  </code></pre>
  
  <p><strong>main.cpp</strong></p>
  
  <pre><code>#include &lt;QGuiApplication&gt;
  #include &lt;QQmlApplicationEngine&gt;
  #include &lt;QUrl&gt;
  
  #include "mycustomwindow.h"
  
  int main(int argc, char *argv[])
  {
      QGuiApplication app(argc, argv);
  
      qmlRegisterType&lt;MyCustomWindow&gt;("mycustomlib", 1, 0, "MyCustomWindow");
  
      QQmlApplicationEngine engine;
      engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
  
      return app.exec();
  }
  </code></pre>
  
  <p><strong>mycustomwindow.h</strong></p>
  
  <pre><code>#ifndef MYCUSTOMWINDOW_H
  #define MYCUSTOMWINDOW_H
  
  #include &lt;QQuickPaintedItem&gt;
  
  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
  </code></pre>
  
  <p><strong>mycustomwindow.cpp</strong></p>
  
  <pre><code>#include "mycustomwindow.h"
  
  #include &lt;QPainter&gt;
  
  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-&gt;fillRect(myRect, Qt::transparent);
      pPainter-&gt;drawRoundedRect(myRect, m_radius, m_radius);
  }
  
  int MyCustomWindow::radius() const
  {
      return m_radius;
  }
  
  void MyCustomWindow::setRadius(int radius)
  {
      m_radius = radius;
  
      emit radiusChanged();
  }
  </code></pre>
  
  <p>What I would like is the child <code>Rectangle</code>'s cornered to be clipped by my custom shape(which in this case is a rounded rectangle. Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/MN9xa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MN9xa.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to achieve something like this in <code>QML</code>?</p>