Schriften vektorisieren

Es gab noch Zeiten, da wollen Leute ihren Text vektorierisieren um mehr Freiheiten zu haben. Inzwischen gibt es Leute die finden noch ganz andere unnötige Gründe wieso man einen Text in einen “Pfad” umwandeln möchte. Sei es weil man zum Beispiel mit PHP einen Text ausgeben möchte, ohne FreeType (zusammen mit GD) zu verwenden. Eine Situation die wohl fast nie vorkommt, trotzdem ein kurzer Artikel zu diesem (eher spielerischen) Thema.

Als erstes müssen wir die gewünschte Schriftart in eine ganze Reihe von Koordinaten umwandeln. Viele Grafikprogramme können dies, wir wollen aber wissen wie man das selber programmieren kann. Hat in unserem Fall auch den Vorteil, dass wir die Ausgabe so gestalten können wie wir wollen.

Vektorisieren

Microsoft bietet für genau diese Aufgabe mit ihrem .Net Framework eine genial einfache Lösung an.  Im Namespace System.Drawing.Drawing2D befindet sich eine Klasse GraphicsPath die ideal ist um Dinge zu vektorisieren.

using System.Drawing.Drawing2D;
...
GraphicsPath path = new GraphicsPath();
path.AddString("Hello World!", FontFamily, FontSize...);

Dadurch hat man bereits alles in GraphicsPath gezeichnet was wir benötigen. Das auslesen der einzelnen Punkte ist genau so einfach:

foreach (PointF p in path.PathPoints)
{
   // Punkte verarbeiten
}

Am Ende dieses Artikels befindet sich eine kleine Applikation die mit Visual Studio 2008 Express geschrieben wurde. Sie generiert ist ohne Abhängigkeiten lauffähig.

Ausgabe

Wie anfänglich erwähnt, wollte ich diese Punkte mittels PHP GD Library ausgeben.

<?php
// Generierter PHP Code für die Schriftart. Bei den Zeichen ' und \ befindet sich ein kleiner Fehler weil ich keine Escape Sequenzen eingebaut habe!
 
// call by reference for $font is not possible because we have to modify the array
function drawLetter(&$im, $font,$letter,$offsetLeft,$offsetTop,$scale=1)
{
   $line_color = imagecolorallocate($im, 66, 14, 91);
 
   foreach ($font[$letter] as $key=>$value)
   {
      $font[$letter][$key] *= $scale;
 
      if ($key % 2 == 0)
      {
         $font[$letter][$key] += $offsetLeft;
      }
      else
      {
         $font[$letter][$key] += $offsetTop;
      }
   }
   imagepolygon($im, $font[$letter], count($font[$letter])/2, $line_color);
}
 
 
header("Content-type: image/png");
$im = @imagecreate(500, 500) or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 255, 255, 255);
 
// Hier beachten, dass man die korrekte Schriftart (analog PHP Schrift) verwendet!
drawLetter($im,$font['Mistral'],'H',10,10,8);
drawLetter($im,$font['Mistral'],'u',80,10,8);
drawLetter($im,$font['Mistral'],'i',145,10,8);
 
imagepng($im);
imagedestroy($im);
?>

Und schon hat man eine TrueType Schriftart ohne FreeType mit PHP ausgegeben. Allerdings mit einigen Einschränkungen:

Problematische Dinge

Es ist wohl nicht besonders klug diese Art und Weise von Ausgabe oft zu verwenden. Hier ein paar Punkte die momentan buggy sind und die Einsatzfähigkeit einschränken:

  • Buchstaben die nicht zusammenhängend sind (z.B.: “i”) werden nicht korrekt dargestellt, da eine Verbindung vom Strich zum Punkt gezeichnet wird
  • Der generierte PHP Code enthält zwei Fehler wenn die Zeichen ‘ und \ ausgegeben werden. Findet ihr aber sicherlich selber 😉
  • Skalieren ist nur bedingt möglich da wir nur “Geraden” zeichnen und keine Kurven
  • Die Daten werden momentan in Form von PHP Code ausgebeben. Ein binäres Format wäre sicherlich viel Effizienter was die Dateigrösse angeht.

VS 2008 Express Quellcode




Keine Kommentare


You can leave the first : )



Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *