Draw a triagle in a rect



  • I suck when it comes to draw things so I was wondering how to draw a rectangle like this in a QRect with the size of 60x60:

    0_1523904596418_591236d3-d530-4b64-b354-0a55b089e6dd-image.png

    (i know, it's horrible) but I wanted the triangle to be at the right side just like this one. - and a little bit smaller than this one.


  • Lifetime Qt Champion

    Hi,

    QPainter is your friend.

    class MyWidget : public QWidget
    {
        void paintEvent(QPaintEvent *event)
        {
            QPainter painter(this);
            QRect currentRect = rect();
            painter.fillRect(currentRect, Qt::black);
            QPolygon polygon;
            QPoint center = currentRect.center();
            QPoint topRight = currentRect.topRight() + QPoint(0, currentRect.height() * 0.90);
            QPoint bottomRight = currentRect.bottomRight() + QPoint(0, -currentRect.height() * 0.90);
    
            polygon << center << topRight << bottomRight;
            painter.setPen(Qt::red);
            painter.setBrush(Qt::red);
            painter.drawPolygon(polygon);
        }
    };
    

  • Qt Champions 2017

    Ahh, i was too slow :)
    QPolygon is a better choice but here is a LineTo version just for learning.

    #ifndef TRIANGLERECT_H
    #define TRIANGLERECT_H
    #include <QPainter>
    #include <QWidget>
    class TriangleRect : public QWidget {
      Q_OBJECT
     public:
      explicit TriangleRect(QWidget* parent = nullptr) : QWidget(parent) {}
     protected:
      virtual void paintEvent(QPaintEvent* ) override {
        QPainter painter(this);
        painter.setRenderHint(QPainter::RenderHint::HighQualityAntialiasing);
        painter.fillRect(rect(), Qt::black);
        QPainterPath path;
        QRect r = rect();
        path.moveTo( r.center() );
        QPoint top = r.topRight();
        QPoint bottom = r.bottomRight()  ;
        int space = height() * 0.10; // 10% space
        top.ry() = top.ry() + space;
        bottom.ry() = bottom.ry() - space;
        path.lineTo(top);
        path.lineTo( bottom);
        path.lineTo( r.center() );
        painter.fillPath(path, QBrush(Qt::red ));
      }
    };
    #endif // TRIANGLERECT_H
    
    

    alt text



  • You guys are awesome, thank you very much ♥



  • For completeness sake, here's a way to do it on qml:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 600
        height: 600
        title: qsTr("Hello World")
    
        Rectangle{
            id: itemDrawnOn
            anchors.centerIn: parent
            width: 90
            height: 90
    
            onHeightChanged: canvas.requestPaint()
            onWidthChanged: canvas.requestPaint()
    
            //Black background
            color:"black"
    
            Canvas{
                //Red triangle
                id:canvas
                anchors.fill: parent
    
                onPaint: {
                    var drawMargin = parent.height * 0.10
                    var centerX = parent.width/2
                    var centerY = parent.height/2
                    var ctx = getContext("2d");
                    ctx.reset();
                    context.beginPath();
                    context.moveTo(itemDrawnOn.width, drawMargin);
                    context.lineTo(centerX, centerY);
                    context.lineTo(itemDrawnOn.width, itemDrawnOn.height-drawMargin);
                    context.lineTo(itemDrawnOn.width, drawMargin)
                    context.closePath();
    
                    context.fillStyle = "red"
                    context.fill();
                }
            }
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.