Qt 2D-Zeichnung: Grundlegende Grafikzeichnung und Verlaufsfüllung

Qt bietet ein leistungsstarkes 2D-Zeichensystem, das dieselbe API zum Zeichnen auf Bildschirmen und Zeichengeräten verwenden kann. Es basiert hauptsächlich auf den drei Klassen QPainter, QPaintDevice und QPaintEngine. Die Beziehung zwischen ihnen ist in der folgenden Abbildung dargestellt:

​

• QPainter wird zum Ausführen von Zeichenvorgängen verwendet.
• QPaintEngine stellt einige Schnittstellen bereit, mit denen QPainter auf verschiedenen Geräten zeichnen kann.
• QPaintDevice stellt ein Zeichengerät bereit, bei dem es sich um eine Abstraktion eines zweidimensionalen Raums handelt, auf dem QPainter zum Zeichnen verwendet werden kann.

Der spezifische Zeichenvorgang wird von QPainter im Zeichensystem ausgeführt, das eine große Anzahl hochoptimierter Funktionen bereitstellt, um die meisten Zeichenarbeiten zu erledigen, die für die GUI-Programmierung erforderlich sind. QPainter kann alle gewünschten Grafiken zeichnen, von der einfachsten geraden Linie bis hin zu beliebigen anderen komplexen Grafiken, und kann auch zum Zeichnen von Texten und Bildern verwendet werden. QPainter kann auf jedes Objekt zurückgreifen, das von der QPaintDevice-Klasse erbt.

QPainter zeichnet im Allgemeinen die Verarbeitungsfunktion paintEvent () eines Komponenten-Neuzeichnungsereignisses (PaintEvent) ein, erstellt zunächst ein QPainter-Objekt (Pinsel), zeichnet dann Grafiken und zerstört schließlich das QPainter-Objekt.

1. Zeichnen grundlegender Grafiken

In QPainter stehen einige praktische Funktionen zum Zeichnen häufig verwendeter Grafiken zur Verfügung. Außerdem können Sie den Pinsel für Linien und Ränder sowie den Pinsel für die Füllung festlegen.

Erstellen Sie eine neue Qt Gui-Anwendung. Der Projektname lautet myDrawing, die Basisklasse lautet QWidget und der Klassenname lautet Widget. Deklarieren Sie nach Abschluss der Einrichtung die Redraw-Ereignishandlerfunktion in der Datei widget.h:

protected:
    void paintEvent(QPaintEvent *);

Fügen Sie dann die Header-Datei #include <QPainter> zur Datei widget.cpp hinzu.

Die Vorteile dieses Artikels, die Gebühr für den Erhalt des Qt-Entwicklungs-Lernmaterialpakets, des technischen Videos und des Inhalts umfasst (C++-Sprachgrundlage, Einführung in die Qt-Programmierung, QT-Signal- und Slot-Mechanismus, QT-Schnittstellenentwicklung – Bildzeichnung, QT-Netzwerk, QT-Datenbankprogrammierung, QT-Projektkampf, QSS, OpenCV, Schnellmodul, Interviewfragen usw.) ↓↓↓↓↓↓ Siehe unten

1.1 Grafiken zeichnen

Definieren Sie in der Datei widget.cpp die Funktion paintEvent() wie folgt:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    //绘制线条
    painter.drawLine(QPoint(0, 0), QPoint(100, 100));
}

Hier wird zunächst ein QPainter-Objekt erstellt, indem der Konstruktor QPainter::QPainter(QPaintDevice *device) verwendet und dieser als Zeichengerät angegeben wird, was bedeutet, dass auf der Komponente gezeichnet wird. Mit diesem Konstruktor erstellte Objekte beginnen sofort mit dem Zeichnen auf dem Gerät, rufen automatisch die Funktion begin() auf und rufen dann die Funktion end() im QPainter-Destruktor auf, um das Zeichnen zu beenden.

Wenn Sie beim Erstellen des QPainter-Objekts das Zeichengerät nicht angeben möchten, können Sie den Konstruktor ohne Parameter verwenden und dann QPainter::begin (QPaintDevice *device) verwenden, um das Zeichengerät anzugeben, wenn mit dem Zeichnen begonnen wird, und dann die Funktion end () aufrufen, um die Zeichnung zu beenden, nachdem die Zeichnung abgeschlossen ist. Der Code in der obigen Funktion entspricht:

QPainter painter;
painter.begin(this);
painter.drawLine(QPoint(0, 0), QPoint(100, 100));
painter.end();

Diese beiden Methoden können die Zeichnung vervollständigen. Unabhängig davon, welche Methode verwendet wird, muss das Zeichengerät angegeben werden, andernfalls ist die Zeichnung nicht möglich. Die zweite Codezeile verwendet die Funktion drawLine(), um ein Liniensegment zu zeichnen. Hier wird eine überladene Form der Funktion QPainter::drawLine ( const QPoint & p1, const QPoint & p2 ) verwendet, wobei p1 und p2 jeweils der Startpunkt und der Endpunkt des Liniensegments sind. Der QPoint(0, 0) ist hier der Ursprung des Fensters und der Standardwert ist die obere linke Ecke des Fensters (mit Ausnahme der Titelleiste). Ergebnisse wie unten gezeigt.

​

 

Zusätzlich zum Zeichnen einfacher Linien bietet QPainter auch einige Funktionen zum Zeichnen anderer häufig verwendeter Grafiken. Die am häufigsten verwendeten sind in der folgenden Tabelle aufgeführt.

Funktion	Funktion
drawArc()	Bogen zeichnen
drawChord()	Schnur ziehen
drawConvexPolygon()	Zeichne ein konvexes Polygon
drawEllipse()	Zeichne eine Ellipse
drawLine()	Linien zeichnen
drawPie()	Draw-Sektor
drawPoint()	Punkte ziehen
drawPolygon()	Polygon zeichnen
drawPolyline()	Polylinie zeichnen
drawRect()	Rechteck zeichnen
drawRoundedRect()	Zeichnen Sie ein abgerundetes Rechteck

Außerdem positionieren wir den Cursor auf dem QPainter-Klassennamen und drücken dann die F1-Taste auf der Tastatur. Anschließend wird automatisch zur Hilfeseite dieser Klasse gesprungen. Natürlich können Sie auch in den Hilfemodus gehen und direkt indizieren, um den Klassennamen zu finden. In der Hilfe können wir viele verwandte Zeichenfunktionen sehen, wie in der folgenden Abbildung dargestellt.

​

 

Wenn wir nach Belieben auf einen Funktionsnamen klicken, springen wir zum Einleitungsabsatz der Funktion. Wenn wir beispielsweise auf die Funktion drawEllipse() klicken, springen wir zur Einführung der Funktion, und oben finden Sie ein Beispiel. Wie nachfolgend dargestellt. Wir können den Code im Beispiel direkt in die Funktion paintEvent() kopieren, um den Effekt zu testen.

​

 

1.2 Verwendung von Pinseln

QPen definiert, wie QPainter Linien oder Umrisse zeichnen soll. Der Pinsel verfügt über Eigenschaften wie Stilstil (), Breite Breite (), Pinselpinsel (), Kappenstil CapStyle () und Verbindungsstil JoinStyle (). Stellen Sie zunächst den Konstruktor der QPen-Klasse vor:

QPen(const QBrush &brush, qreal width, Qt::PenStyle s = Qt::SolidLine,
         Qt::PenCapStyle c = Qt::SquareCap, Qt::PenJoinStyle j = Qt::BevelJoin);

• Der Pinsel () wird verwendet, um die vom Pinsel gezeichneten Linien zu füllen.
• Der Pinselstil style() definiert den Stil der Linie.
• Der Stiftkappenstil capStyle() definiert das Ende der mit QPainter gezeichneten Linie;
• Der Verbindungsstil joinStyle() definiert, wie zwei Linien verbunden werden.
• Pinselbreite width() oder widthF() definiert die Breite des Pinsels. Beachten Sie, dass es keine Linien mit einer Breite von 0 gibt. Angenommen, Sie setzen die Breite auf 0, QPainter zeichnet weiterhin eine Linie und die Breite dieser Linie beträgt 1 Pixel.

So viele Parameter können zum Zeitpunkt der Konstruktion angegeben oder mit der Set-Funktion angegeben werden, es hängt ganz von Ihren Gewohnheiten ab. Verschiedene Einstellungen können einfach mit den Funktionen setWidth(), setBrush(), setCapStyle() und setJoinStyle() geändert werden.

Pinselstil

​

 

Ändern Sie dann den Inhalt der Funktion paintEvent() wie folgt:

void Widget::paintEvent(QPaintEvent *)
{
    //创建画笔
    QPen pen(Qt::green, 5, Qt::DotLine, Qt::RoundCap, Qt::RoundJoin);
    //使用画笔绘制圆弧
    painter.setPen(pen);
    QRectF rectangle(70.0, 40.0, 80.0, 60.0);
    int startAngle = 30 * 16;
    int spanAngle = 120 * 16;
    painter.drawArc(rectangle, startAngle, spanAngle);
}

Nachdem Sie den Pinsel oben erstellt haben, verwenden Sie setPen(), um den Pinsel für den Maler festzulegen, und zeichnen Sie dann mit dem Pinsel einen Bogen. Eine überladene Form der Zeichnungsbogenfunktion ist QPainter::drawArc ( const QRectF & rechteck, int startAngle, int spanAngle ), wobei die drei Parameter dem Rechteck entsprechen, in dem der Bogen angegeben werden muss, dem Startwinkel und dem Spannwinkel, wie in der Abbildung unten gezeigt.

QRectF:: QRectF (qreal x, qreal y, qreal width, qreal height) kann Gleitkommazahlen als Parameter verwenden, um ein Rechteck zu bestimmen, das die Koordinaten (x, y) der oberen linken Ecke, Breite und Höhe angeben muss. Wenn Sie nur Ganzzahlen zum Definieren eines Rechtecks ​​verwenden möchten, können Sie die Klasse QRect verwenden. Der Wert des Winkels ist hier der tatsächliche Grad multipliziert mit 16. Auf dem Zifferblatt der Uhr zeigt 0 Grad auf die Position 3 Uhr. Wenn der Winkelwert positiv ist, bedeutet dies eine Drehung gegen den Uhrzeigersinn. Wenn der Winkelwert negativ ist, bedeutet dies eine Drehung im Uhrzeigersinn. Der Wert des gesamten Kreises beträgt 5760 (d. h. 360 x 16).

​

 

1.3 Verwendung von Pinseln

Die QBrush-Klasse stellt Pinsel zum Füllen von Grafiken bereit. Ein Pinsel wird anhand seiner Farbe und seines Stils (z. B. seines Füllmodus) definiert. Stellen Sie zunächst den Konstruktor der QBrush-Klasse vor:

QBrush(const QColor &color, Qt::BrushStyle bs=Qt::SolidPattern);

Die in Qt verwendeten Farben werden im Allgemeinen durch die QColor-Klasse dargestellt, die Farbmodelle wie RGB, HSV und CMYK unterstützt. Wenn es drei Parameter enthält, handelt es sich um die Werte der roten, grünen und blauen Komponenten, die häufig als RGB bezeichnet werden, und der Wertebereich liegt zwischen 0 und 255. (255, 0, 0) bedeutet hier beispielsweise, dass die rote Komponente 255 und die anderen Komponenten 0 sind, sodass die Ausgabe rot ist. Wenn vier Parameter vorhanden sind, dient der letzte Parameter Alpha zum Festlegen der Transparenz. Der Wertebereich liegt ebenfalls zwischen 0 und 255. 0 bedeutet vollständig transparent und 255 bedeutet vollständig undurchsichtig. Außerdem gibt es in Qt 20 vordefinierte Farben, wie in der folgenden Abbildung dargestellt.

​

 

Der Füllmodus des QBrush-Stils wird durch die Aufzählungsvariable Qt::BrushStyle definiert, die grundlegende Musterfüllung, Verlaufsfüllung und Texturfüllung umfasst. Alle Aufzählungsvariablen sind in der folgenden Abbildung dargestellt. Der Standardstil ist Qt::NoBrush (abhängig davon, wie Sie den Pinsel erstellen), der die Form nicht ausfüllt. Der Standardfüllstil ist Qt::SolidPattern. Es gibt zwei Möglichkeiten, den Pinselstil festzulegen: Eine besteht darin, den Konstruktor zu verwenden, und die andere darin, die Setstyle-Funktion zu verwenden.

​

 

Ändern Sie dann den Inhalt der Funktion paintEvent() wie folgt:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPen pen; //画笔
    pen.setColor(QColor(255, 0, 0));
    QBrush brush(QColor(0, 255, 0, 125)); //画刷
    painter.setPen(pen); //添加画笔
    painter.setBrush(brush); //添加画刷
    painter.drawRect(50, 50, 200, 100); //绘制矩形
}

Hier werden ein Pinsel-QPen und ein Pinsel-QBrush neu erstellt. Unter anderem verwendet der Pinsel die Funktion setColor(), um die Farbe für ihn festzulegen, und der Pinsel ist die Farbe, die beim Erstellen direkt für ihn festgelegt wird. Dann setzen wir Stift und Pinsel auf den Maler und zeichnen mit drawRect() ein Rechteck, dessen obere linke Ecke bei (50, 50) liegt, mit einer Breite von 200 und einer Höhe von 100. Führen Sie das Programm aus. Der Effekt ist in der folgenden Abbildung dargestellt.

​

 

2. Verlaufsfüllung

Verlaufsfüllungen können auch in Pinseln verwendet werden. Die QGradient-Klasse wird verwendet, um Verlaufsfüllungen mit QBrush anzugeben. Qt unterstützt jetzt drei Arten von Verlaufsfüllungen:

• Ein linearer Farbverlauf interpoliert die Farben zwischen den Start- und Endpunkten;
• Radiale Farbverläufe interpolieren Farben zwischen dem Brennpunkt und dem ihn umgebenden Ring;
• Konische Farbverläufe (konisch) interpolieren Farben um den Mittelpunkt eines Kreises.

Diese drei Verläufe werden durch drei Unterklassen von QGradient dargestellt: QLinearGradient repräsentiert einen linearen Gradienten, QRadialGradient repräsentiert einen radialen Gradienten und QConicalGradient repräsentiert einen konischen Gradienten.

(1) Linearer Farbverlauf

QLinearGradient::QLinearGradient ( const QPointF & start, const QPointF & finalStop )

Bei linearen Farbverläufen müssen der Startpunkt Start und der Endpunkt finalstop angegeben und dann die Fläche zwischen dem Startpunkt und dem Endpunkt ausgeglichen werden. Die Position des Startpunkts ist 0,0, die Position des Endpunkts ist 1,0. Die Position zwischen ihnen wird auf das Abstandsverhältnis eingestellt und dann wird die Funktion QGRADIENT :: Setcolorat (QREAL POSITION, Const QCOLORJ & Die Farbe) verwendet, um die angegebene Farbe an der angegebenen Position festzulegen. Natürlich liegt der Wert der Posität hier zwischen 0 und 1
.

Hier können Sie auch die Funktion setSpread () verwenden, um die Fülldiffusionsmethode festzulegen, dh anzugeben, wie andere Bereiche als der angegebene Bereich ausgefüllt werden sollen. Die Ausbreitungsmethode wird durch die Aufzählungsvariable QGradient::Spread definiert, die insgesamt drei Werte hat, nämlich QGradiem::PadSpread, das mit der nächstgelegenen Farbe gefüllt wird, was der Standardwert ist; QGradient::ReflectSpread spiegelt den Farbverlauf außerhalb des Farbverlaufsbereichs wider; QGradiem::RepeatSpread wiederholt den Farbverlauf außerhalb des Farbverlaufsbereichs. Um die Verlaufsfüllung zu verwenden, können Sie sie direkt in setBrush() verwenden, dann wird der Pinselstil automatisch auf die entsprechende Verlaufsfüllung eingestellt. Die Wirkung dieser drei Diffusionsmethoden im linearen Gradienten ist in der folgenden Abbildung dargestellt.

​

 

(2) Strahlender Farbverlauf

QRadialGradient::QRadialGradient ( const QPointF & center, qreal radius, const QPointF & focalPoint )

Der radiale Gradient muss den Mittelpunkt des Kreises und den Radius angeben, sodass ein Kreis bestimmt wird, und dann wird ein Brennpunkt angegeben. Die Position des Fokus ist 0, die Position des Rings ist 1 und dann wird die Farbe zwischen Fokus und Ring interpoliert. Der Strahlungsgradient kann auch die Funktion setSpread () verwenden, um den Ausbreitungsmodus des Bereichs außerhalb des Gradientenbereichs festzulegen. Die Auswirkungen der drei Ausbreitungsmodi sind in der folgenden Abbildung dargestellt.

​

 

(3) Konischer Farbverlauf

QConicalGradient::QConicalGradient ( const QPointF & center, qreal angle )

Der sich verjüngende Farbverlauf muss den Mittelpunkt des Mittelpunkts und einen Winkelwinkel angeben (der Wert liegt zwischen 0 und 360) und dann beginnen, die Farbe ab dem angegebenen Winkel gegen den Uhrzeigersinn um den Mittelpunkt herum zu interpolieren. Der hier angegebene Winkel beträgt zu Beginn der Gegenuhrzeigersinnsrichtung 0 und nach einer Umdrehung 1. Die Funktion setSpread() hat keine Auswirkung auf sich verjüngende Farbverläufe.

(4) Beispielprogramm

Das Beispielprogramm lautet wie folgt:

void Widget::paintEvent(QPaintEvent *)
{
    //线性渐变
    QLinearGradient linearGradient(QPointF(40, 190),QPointF(70, 190));
    //插入颜色
    linearGradient.setColorAt(0, Qt::yellow);
    linearGradient.setColorAt(0.5, Qt::red);
    linearGradient.setColorAt(1, Qt::green);
    //指定渐变区域以外的区域的扩散方式
    linearGradient.setSpread(QGradient::RepeatSpread);
    //使用渐变作为画刷
    QPainter painter(this);
    painter.setBrush(linearGradient);
    painter.drawRect(100, 100, 90, 40);

    //辐射渐变
    QRadialGradient radialGradient(QPointF(100, 190),50,QPointF(275,200));
    radialGradient.setColorAt(0, QColor(255, 255, 100, 150));
    radialGradient.setColorAt(1, QColor(0, 0, 0, 50));
    painter.setBrush(radialGradient);
    painter.drawEllipse(QPointF(100, 200), 50, 50);

    //锥形渐变
    QConicalGradient conicalGradient(QPointF(250, 190), 60);
    conicalGradient.setColorAt(0.2, Qt::cyan);
    conicalGradient.setColorAt(0.9, Qt::black);
    painter.setBrush(conicalGradient);
    painter.drawEllipse(QPointF(250, 200), 50, 50);
}

Führen Sie das Programm aus. Der Effekt ist wie folgt:

​

Der Artikel stammt aus dem Bloggarten (fengMisaka): Qt 2D-Zeichnung eins: Grundlegende Grafikzeichnung und Verlaufsfüllung

Die Vorteile dieses Artikels, die Gebühr für den Erhalt des Qt-Entwicklungs-Lernmaterialpakets, des technischen Videos und des Inhalts umfasst (C++-Sprachgrundlage, Einführung in die Qt-Programmierung, QT-Signal- und Slot-Mechanismus, QT-Schnittstellenentwicklung – Bildzeichnung, QT-Netzwerk, QT-Datenbankprogrammierung, QT-Projektkampf, QSS, OpenCV, Schnellmodul, Interviewfragen usw.) ↓↓↓↓↓↓ Siehe unten