Es ist jetzt bereits einige Zeit vergangen seitdem ich über Versuche berichtet habe, den "Servietten-Look" wie bei SketchViz oder Rough.js auch in Java-Programmen zu erreichen. Letztes Mal berichtete ich über komplexe Strokes, mit denen sich so etwas realisieren ließe.

Ich habe dieses Projekt also jetzt im Urlaub nochmals hervorgeholt und versucht, eine Art Abschluss dafür zu finden. Das Ziel für dieses Mal war, einen transparenten Graphic-Context zu schaffen, in den man einfach zeichnen könnte wie in normalen Java-Programmen und der aus sich heraus den "handgemachten" Look erzeugen würde.

Dafür habe ich den Code aus einem der im letzten Versuch vorgestellten Strokes extrahiert und in eine Klasse gepackt, die von java.awt.Graphics2D abgeleitet wurde. Darin sind alle Methoden zum Zeichnen vom primitiven Graphikobjekten, die sich als Vektoren oder java.awt.Shape beschreiben lassen entsprechend überschrieben. Der Graphic-Context selbst ist so beschaffen, dass man die "Sloppiness" - also den Grad um den die Zeichnung von der jeweiligen präzisen Form abweicht - konfigurieren kann. Die einzigen Primitiven, die bisher nicht unterstützt werden sind 3D-Rechtecke.

Sowohl die Umrandung wie auch gefüllte Versionen der Primitiven werden unterstützt.

Außerdem ist noch anpassbar, ob die Form einmal oder - wie in manuellen Skizzen hin und wieder - leicht voneinander abweichend mehrfach gezeichnet werden soll. Ich zeige hier zwei Demonstrationen des Ergebnisses - rot sind die jeweiligen präzisen Darstellungen und überlagernd in schwarz die "sloppy" Versionen dargestellt. Bei gefüllten Versionen wurde die Deckkraft auf 50% abgesenkt um beide Versionen einfacher vergleichen zu können. Unten links sieht man, dass auch andere Strokes benutzt werden können - einmal ist ein dickerer Strich zu sehen, einmal ein unterbrochener.

Zunächst eine Version mit geringerer Sloppiness - also ein, deren Ergebnis näher am präzisen Original ist:

Verschiedene graphische Primitiven präzise (rot) und mit geringer Sloppiness (schwarz)

Im Gegensatz dazu eine Version mit deutlich erhöhter Sloppiness:

Verschiedene graphische Primitiven präzise (rot) und mit höherer Sloppiness (schwarz)

Man könnte jetzt fragen, ob sich dieser Graphics-Context auch für normale GUIs von Anwendungen einsetzen ließe (wer würde so etwas tun wollen?) - und man muss antworten: nein. Wie man im folgenden Screenshot sehen kann, sind die normalen Swing-Controls darauf ausgelegt, dass ihre Grundform Rechtecke mit geraden Kanten sind - sobald man diese in einem entsprechenden Canvas darstellt, was dazu führt, dass ihre Konturen eben keine solchen Rechtecke mehr sind werden die Kanten gnadenlos vom jeweiligen UI überzeichnet und verschwinden, so dass der visuelle Eindruck des Ergebnisses iom besten Falle fragwürdig erscheint:

Eine JTable mit dem neuen Graphic-Context dargestellt

Die aktuelle Version dieses Experiments kann auf Gitlab eingesehen werden. Die wichtige Klasse ist dabei RoughGraphics.

Derzeit ist das eine Software im Status "final pre-alpha" - also auf gar keinen Fall zum Produktiveinsatz vorgesehen und selbst bei Einsatz im experimentellen Umfeld ist noch Vorsicht geboten!

Zur Illustration meiner Beweggründe der Implementierung des Verfahrens als transparenten java.awt.Graphics2D hier noch eine SVG-Graphik, die ich aus der oben gezeigten Demo erzeugt habe, indem ich den Inhalt des neuen RoughGraphics in einen SVG-Canvas aus dem Apache Batik Projekt ausgegeben habe:

Verschiedene graphische Primitiven direkt aus dem neuen RoughGraphics als SVG

Artikel, die hierher verlinken

Kommentar hinzufügen (via ) Kommentare ansehen (via )

Kommentar hinzufügen (via ) Kommentare ansehen (via )