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

Detaillierte Erklärung der JS-Array-Methoden

Inhaltsverzeichnis 1. Das ursprüngliche Array wir...

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

JavaScript-Umschalteffekt für Bekleidungsalben (ä...

Vollständiges Beispiel einer Vue-Polling-Request-Lösung

Verständnis von Umfragen Tatsächlich liegt der Sc...

So führen Sie Befehle auf einem Remote-Linux-System über SSH aus

Manchmal müssen wir einige Befehle auf einem Remo...

HTML-Formular und die Verwendung interner Formular-Tags

Code kopieren Der Code lautet wie folgt: <html...

JavaScript realisiert die Generierung und Überprüfung von Zufallscodes

Die Generierung und Überprüfung von Zufallscodes ...

Lernprogramm für HTML-Webseitenlisten-Tags

Lernprogramm zum Erlernen von Listen-Tags für HTML...

Beispielcode einer Vue-Anwendung basierend auf der Axios-Anforderungskapselung

Inhaltsverzeichnis Was ist Axios? Axios-Anforderu...

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Herkunft Zurzeit arbeite ich an Anforderung A, in...

Front-End-KI-Schnitttipps (Erfahrung)

Das AI-Bildschneiden muss mit PS koordiniert werd...