Wie geht man vor, wenn man einen Effekt erstellen will, der einige einstellbare Parameter erfordert? In diesem Beispiel geht es um die Erstellung eines Effekts, der die Standard-Benutzeroberfläche mit 3 Schiebereglern verwendet, die bei vielen Paint.NET-Effekten zu finden ist.
Öffnen Sie CodeLab und werfen Sie einen Blick auf das Standardskript. Oben im Skript, in der UICode-Region, sehen Sie die Definition für drei Integer-Schieberegler:
Hier Beispielbild
Normalerweise würden Sie den Benutzeroberflächendesigner (Strg+I) verwenden, um die für Ihren Effekt erforderlichen Steuerelemente zu erstellen. In diesem Fall werden wir jedoch einen Effekt mit drei ganzzahligen Schiebereglern entwerfen, so dass wir praktisch schon alles haben, was wir brauchen. Wir müssen nur noch die Mindestwerte und die Beschriftung der Regler ändern.
Der Effekt, den wir erstellen werden, ist der Effekt Farbbalance. Er hat die folgende Benutzeroberfläche (UI):
Hier Beispielbild
Kopieren Sie diese Zeilen und fügen Sie sie in Ihr Standard-Skript ein, indem Sie den bestehenden UICode-Bereich ersetzen:
Hier Beispielcode
Sobald Sie das getan haben, können Sie Strg+I drücken, um mit diesen Reglern im User Interface Designer zu spielen.
OK, jetzt, da unser Effekt die 3 Schieberegler hat, die wir brauchen, lassen Sie uns den Code schreiben, der diese Schieberegler tatsächlich auf das Bild wirken lässt.
Die Funktion Render() enthält einige Zeilen am Anfang des Codes für einige Standardvariablen. Wir brauchen diese Informationen nicht, also löschen Sie die folgenden Zeilen aus Ihrem Skript:
Hier Beispielcode
Kommen wir nun zum eigentlichen Kern unseres Effekts. Wie Sie sich aus der letzten Lektion erinnern, haben wir eine Renderfunktion, die alle Pixel auf der Zielleinwand in einer Schleife durchläuft. Damit ist dieser Abschnitt aus unserem Standardskript beschrieben:
Hier Beispielcode
Wenn man sich den Code ansieht, sieht man, dass er ein Pixel aus der Quellleinwand liest "CurrentPixel = src[x,y];" und es in die Zielleinwand schreibt "dst[x,y] = CurrentPixel;". Wir müssen nun die // Kommentarzeilen in der Mitte durch unseren Algorithmus ersetzen. Machen Sie weiter und löschen Sie sie jetzt. Unser Quellcode sollte nun wie folgt aussehen:
Hier Beispielcode
Da wir mit den Farben Rot "R", Grün "G" und Blau "B" getrennt arbeiten werden, benötigen wir einige Variablen, um unsere temporären Werte zu speichern, während wir unsere endgültigen Werte berechnen. Wir werden sie einfach so definieren: int R, G, B;
Fügen Sie diese Zeile über unserer Schleife wie folgt ein:
Hier Beispielcode
OK, jetzt, da die R-, G- und B-Variablen in der inneren Schleife verfügbar sind, können wir endlich die "TODO:"-Zeile in Angriff nehmen.
Um unsere Pixelverarbeitung durchzuführen, müssen wir zunächst die RGB-Werte des aktuellen Pixels erfassen und sie in unsere temporären Variablen einfügen. Ersetzen Sie die Zeile in der "TODO"-Sektion durch die folgende:
Hier Beispielcode
Wie funktioniert das? Ich bin froh, dass Sie fragen. Wenn Paint.NET die Funktion Render() aufruft, werden drei Dinge übergeben: die Zielfläche (dst), die Quellfläche (src) und das Rechteck von Interesse (rect). Unsere Aufgabe ist es, jedes Pixel auf der dst-Oberfläche zu beschreiben und dabei die Grenzen des Rechtecks von Interesse (rect) nicht zu überschreiten. Das ist die Aufgabe unserer x,y-Schleifen. Die src-Oberfläche enthält die aktuelle Ebene, bevor Änderungen vorgenommen werden, und die dst-Oberfläche ist der Ort, an dem wir unsere geänderten Pixel ablegen. Jedes Pixel ist als ColorBgra-Struktur definiert, d. h. eine 32-Bit-Struktur mit 8 Bits für den Rotanteil, 8 Bits für den Grünanteil, 8 Bits für den Blauanteil und 8 Bits für Alpha.
Wir zerlegen diese Struktur einfach in die einzelnen Farbkomponenten R, G und B. Jetzt können wir diese Werte unabhängig voneinander als Ganzzahlen einstellen.
Erinnern Sie sich an unser Farbrad?
Hier Beispielbild
Die Pfeile in der Zeichnung stellen die 3 Schieberegler für unseren Effekt dar.
Rot ist eine Primärfarbe und Cyan (eine Sekundärfarbe) besteht aus einer Kombination von Grün und Blau (zwei Primärfarben). Jeder der 3 Schieberegler ist ebenfalls eine Primärfarbe an einem Ende und eine Sekundärfarbe am anderen Ende.
Die gewünschte Menge der "Rot-Cyan"-Anpassung aus unserer Benutzeroberfläche befindet sich in der Variablen Amount1. Verwenden wir nun diesen Betrag, um unsere R-, G- und B-Werte anzupassen.
Wenn der Benutzer den Schieberegler in Richtung Rot bewegt, erhalten wir einen positiven Wert in Amount1. Wir müssen diesen Wert also zur Variable R hinzufügen:
Hier Beispielcode
Da wir den Rot-Wert erhöht haben, müssen wir von den Grün- und Blau-Werten etwas abziehen. Da Grün und Blau auf der gleichen Seite des Schiebereglers liegen, müssen wir sie jeweils zur Hälfte anpassen:
Hier Beispielcode
Und damit sind die Berechnungen für unseren ersten Schieberegler erledigt! Fügen wir diesen Teil des Codes in unser Skript ein, nachdem wir das ColorBgra in seine Teile zerlegt haben. Unser Skript sollte nun wie folgt aussehen:
Hier Beispielcode
Um die Ergebnisse auf der Leinwand zu sehen, müssen wir die R-, G-, B- und Alpha-Werte wieder zu einem ColorBgra-Pixel zusammensetzen. Das können wir mit der folgenden Zeile erreichen:
Hier Beispielcode
Diese Zeile erzeugt ein neues ColorBgra-Pixel aus den einzelnen R-, G-, B- und Alpha-Komponenten. Und da wir die Version "Geklammert" der Funktion verwenden, werden alle Werte, die über 255 liegen, auf 255 geklammert und alle Werte, die unter 0 liegen, auf 0 geklammert.
Beachten Sie, dass wir die Alphastufe unserer Pixel nicht ändern, sondern einfach die Alphastufe des ursprünglichen Pixels verwenden, wenn wir unsere neue Farbe erstellen.
Setzen Sie diese Zeile über die Zeile "dst[x,y] = currentPixel;", um sie in Aktion zu sehen. Sobald Sie diese Zeile in Ihren Code eingefügt haben, können Sie Strg+P drücken, um den Effekt in der Vorschau zu sehen, und mit dem Schieberegler "Cyan - Rot" spielen, um zu sehen, wie er funktioniert.
Nun, da wir mit der Funktionsweise zufrieden sind, können wir den zweiten und dritten Schieberegler implementieren:
Hier Beispielcode
Similar to the way we calculate the "Cyan - Red" changes, we do the same thing with "Magenta - Green" (Amount2) and "Yellow - Blue" (Amount3).
Place that code just after our "Cyan - Red" adjustment code. Our script should now look like this:
Hier Beispielcode
...und wir sind fertig!
Hinweis: Dieser Code könnte noch effizienter gestaltet werden, aber ich wollte ihn so belassen, dass er für einen Anfänger lesbar ist.
Übrigens, wenn Sie Fehler in Ihrem Code haben, werden diese in dem Fenster unter Ihrem Code angezeigt. Ein Doppelklick auf die erste Fehlermeldung führt Sie zu der Stelle in Ihrem Code, an der das Problem auftritt.
Wahrscheinlich werden Sie mit Ihrem Effekt in CodeLab herumspielen und daran herumschrauben wollen, bis Sie sicher sind, dass er richtig funktioniert. Dafür ist CodeLab ja da!
Jetzt kommt der spaßige Teil... Zeit, eine DLL unseres Effekts zu erstellen, damit wir ihn mit all unseren Freunden teilen können!
Da Ihr Code in CodeLab ist und gut funktioniert, gehen Sie zurück und stellen Sie sicher, dass Ihre ersten 3 Zeilen (die die Schieberegler beschreiben) korrekt sind. Möglicherweise haben Sie sie geändert, als Sie während der Testphase an Ihrem Code herumgebastelt haben.
Wenn alles in Ordnung ist, folgen Sie den Anweisungen auf der Seite Build a DLL, um Ihren neuen Effekt dauerhaft in Paint.NET einzubinden oder Ihre DLL mit Ihren Freunden zu teilen.