Tkinter verwendet JS-Canvas, um Farbverlaufsfarben zu erzielen

Tkinter verwendet JS-Canvas, um Farbverlaufsfarben zu erzielen

Früher war ich nicht sehr an GUI interessiert, aber vor kurzem musste ich aus besonderen Gründen tkinter verwenden und einen Farbverlauf implementieren. Als ich jedoch die Dokumentation durchsah, stellte ich fest, dass es keine integrierte Funktion zur Implementierung dieser Funktion gab. Ich musste sie selbst implementieren, also suchte ich nach dem Prinzip des Farbverlaufs und implementierte es.

1. Verwenden Sie RGB zur Darstellung von Farben

Tkinter bietet keine Funktion, die RGB als Parameter verwendet. Sie müssen daher den Hexadezimalwert in den GRB-Wert konvertieren. Natürlich ist die Methode auch sehr einfach und besteht darin, Hexadezimaloperationen durchzuführen.

Code:

auf Grund von use_rgb(rgb):
    """
    Konvertieren Sie RGB in Hexadezimal-Argumente:
        rgb: RGB-Farbe. Gibt zurück: hexadezimal """
    rgb = str(rgb)
    RGB = rgb.replace('(', '').replace(")", '').split(',') # Teilen Sie das RGB-Format Farbe = '#'
    für i in RGB:
        Zahl = int(i)
        # R, G und B in Hexadezimalzahlen umwandeln und großschreiben. Die Funktion hex() wird verwendet, um eine Dezimalzahl in eine Hexadezimalzahl umzuwandeln und in Zeichenfolgenform auszudrücken. color += str(hex(num))[-2:].replace('x', '0')
    Rückgabefarbe

Da das übergebene RGB in Tupelform vorliegt, wird es in eine Zeichenfolge und dann in eine hexadezimale Zeichenfolge konvertiert. Denken Sie daran, davor # hinzuzufügen.

2. Tkinter Canvas-Komponente

Die Canvas-Komponente wird in der Tkinter-Bibliothek zum Zeichnen von Objekten verwendet. Sie kann Liniensegmente, Rechtecke, Polygone, Bögen usw. zeichnen.

Um die Canvas-Komponente zu verwenden, müssen Sie zuerst ein Fensterobjekt als übergeordnetes Objekt der Canvas-Komponente erstellen.

importiere tkinter als tk
# Initialisieren Sie zuerst die tkinter-Komponente und erstellen Sie ein Fensterobjekt window = tk.Tk()
# Fenstertitel, Länge und Breite festlegen window.title("title")
Fenster.Geometrie("800x600")

Nach dem Ausführen passiert nichts, da das Fenster angezeigt werden muss

Fenster.Hauptschleife()

Dann ist da ein kleiner Rahmen ohne leuchtendes Licht.

Die Erstellung der Leinwand ist gleichzeitig die Instanziierung der Erstellungsklasse. Sie kann ohne Parameter erfolgen und später angepasst werden, oder sie kann gleichzeitig mit der Erstellung instanziiert werden.

# Canvas verwenden
Leinwand = Fenster.Leinwand()

Sie können außerdem:

# Fenster ist das übergeordnete Objekt von Canvas, Breite und Höhe sind die Breite und Höhe von Canvas auf einen Blick Canvas = tk.Canvas(Fenster, Breite=800, Höhe=600)
# Mit dieser Methode kann der Layoutmodus festgelegt werden. Natürlich ist dies auch die Methode zum Anzeigen der Leinwand canvas.pack()

Natürlich passiert zu diesem Zeitpunkt nichts, nachdem es ausgeführt wurde. Wir müssen etwas auf die Leinwand zeichnen

Dann zeichnen wir ein Rechteck durch die Leinwand

canvas.create_rectangle(100, 100, 300, 300, füllen="rot")
# Diese Codezeile kann auch so geschrieben werden: canvas.create_rectangle((100, 100, 300, 300), fill="red")

Dadurch wird ein rotes Rechteck gezeichnet.

3. Richten Sie den Farbverlauf ein

Der Farbverlauf wird hier nicht direkt auf das Rechteck angewendet, sondern erfordert die Verwendung von Liniensegmenten, von denen jedes eine Farbe anzeigt, um einen Farbverlaufseffekt zu erzeugen.

So zeichnen Sie ein Liniensegment:

Leinwand.Erstellen_Zeile()

Das Parameterformat ähnelt dem oben stehenden Liniensegment, mit der Ausnahme, dass zum Zeichnen eines Liniensegments nur zwei Koordinaten erforderlich sind.

3.1 Das Gradientenprinzip

Das einfache Prinzip besteht darin, eine Farbe von dunkel auf hell, dann auf eine andere helle Farbe und dann wieder auf dunkel einzustellen.

Das klingt einfach, ist aber dennoch etwas schwierig umzusetzen.

Unsere Idee ist:

Schleifenliniensegment

Berechnen Sie die Farbe jedes Liniensegments

Wenn wir ein Liniensegment zeichnen, müssen wir nur diese drei Parameter berechnen:

Länge des Rechtecks ​​x-Koordinate des Startpunkts des Liniensegments y-Koordinate des Startpunkts des Liniensegments

Ausgangspunkt ist hier nicht der Anfangspunkt, sondern der Punkt über der Strecke.

Wir müssen auch die RGB-Werte der beiden Farben kennen, die wir für den Farbverlauf benötigen

Für den Farbverlauf müssen wir nur den Wert eines bestimmten Liniensegments am Anfang kennen und ihn dann mit RGB kombinieren, was die Farbe eines bestimmten Liniensegments ist.

3.2 Beispiel 1

Verwandeln Sie dieses rote Rechteck in einen rot-blauen Farbverlauf von links nach rechts

Roter GRB-Wert (255, 0, 0)

Blauer RGB-Wert (0, 0, 255)

#!/usr/bin/env python
# -*- Kodierung: utf-8 -*-
# @Autor: Smly
# @datetime: 2021/12/4 19:44
#@Version: 1.0
importiere tkinter als tk
ROT = (255, 0, 0)
BLAU = (0, 0, 255)

auf Grund von use_rgb(rgb):
    """
    Konvertieren Sie RGB in Hexadezimal-Argumente:
        rgb: RGB-Farbe. Gibt zurück: hexadezimal """
    rgb = str(rgb)
    RGB = rgb.replace('(', '').replace(")", '').split(',') # Teilen Sie das RGB-Format Farbe = '#'
    für i in RGB:
        Zahl = int(i)
        # R, G und B in Hexadezimalzahlen umwandeln und großschreiben. Die Funktion hex() wird verwendet, um eine Dezimalzahl in eine Hexadezimalzahl umzuwandeln und in Zeichenfolgenform auszudrücken. color += str(hex(num))[-2:].replace('x', '0')
    Rückgabefarbe

# Initialisieren Sie zuerst die tkinter-Komponente und erstellen Sie ein Fensterobjekt window = tk.Tk()
# Fenstertitel, Länge und Breite festlegen window.title("title")
Fenster.Geometrie("800x600")
# Canvas verwenden
Leinwand = tk.Canvas(Fenster, Breite=800, Höhe=600)
Leinwand.pack()
a1, a2, a3, b1, b2, b3 = ROT[0], ROT[1], ROT[2], BLAU[0], BLAU[1], BLAU[2]
# Unterschied in RGB
r, g, b = (b1 - a1), (b2 - a2), (b3 - a3)
drucken(r, g, b)
h = 200
für i im Bereich (200):
    x1 = 100 + ich
    y1 = 100
    t = (x1 - 100) / (300 - 100)
    rgb = (int(a1 + r * t), int(a2 + g * t), int(a3 + b * t))
    drucken(rgb)
    canvas.create_line((x1, y1), (x1, y1 + h), füllen=use_rgb(rgb))
Fenster.Hauptschleife()

Wirkung:

Bildbeschreibung hier einfügen

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • JavaScript Canvas zeichnet ein Rechteck mit Farbverlauf
  • Beispiel für einen Regenbogeneffekt beim WeChat-Applet basierend auf einem Canvas-Farbverlauf
  • Vollständiges Beispiel für einen Verlaufsbereich im JavaScript+HTML5-Canvas-Zeichenbereich
  • Methode zum Realisieren mehrerer Farbverlaufseffekte auf der Leinwand mit js+HTML5

<<:  So stellen Sie Kafka in Docker bereit

>>:  Verwenden Sie eine Tabelle, um das Format der Formularsteuerelemente anzupassen, damit sie besser aussehen

Artikel empfehlen

Mit CSS3 wird ein Kegelschnitt-Gradienteneffekt erzielt

Grammatik: Hintergrundbild: Kegelschnitt-Farbverl...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 (Linux)

Dieser Artikel zeichnet das grafische Tutorial zu...

vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)

@vue+echarts realisiert den Flusseffekt der China...

Implementierungsprozess von row_number in MySQL

1. Hintergrund Im Allgemeinen können wir in einer...

Linux implementiert den Quellcode des Zahlenratespiels

Ein einfacher Linux-Ratespiel-Quellcode Spielrege...

So stellen Sie mit Navicat Premium eine Remoteverbindung zur MySQL-Datenbank her

Derjenige, der eine neue Verbindung herstellt, en...

Implementierung der Nginx-Lastverteilung/SSL-Konfiguration

Was ist Lastenausgleich? Wenn ein Domänenname auf...

So konfigurieren Sie Bash-Umgebungsvariablen in Linux

Shell ist ein in der Programmiersprache C geschri...

Schritte zur Installation von MySQL 5.7.10 auf Windows Server 2008 R2

Installation mithilfe des MSI-Installationspakets...

Detaillierte Analyse von Absturzfällen bei MySQL-Instanzen

[Problembeschreibung] Unsere Produktionsumgebung ...

Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes

Inhaltsverzeichnis LAMP-Architektur 1.Lampeneinfü...

Alibaba Cloud Centos7 Installation und Konfiguration von SVN

1. SVN-Server installieren yum installiere Subver...

So verwenden Sie Mixins in Vue

Inhaltsverzeichnis Vorwort Anwendung Zusammenfass...