Simplified SVG path creation

Author: PhenX

classes/font_glyph_outline_simple.cls.php

@@ -114,7 +114,7 @@ function parse(){
     return $this->data = $data;
   }
 
-  public function getSVGPath(){
+  public function getSVGContours(){
     $path = "";
 
     $points = $this->data["points"];
@@ -126,7 +126,7 @@ public function getSVGPath(){
       $count++;
 
       if ($points[$i]["endOfContour"]) {
-        $path .= $this->addContourToPath($points, $firstIndex, $count);
+        $path .= $this->getSVGPath($points, $firstIndex, $count);
         $firstIndex = $i + 1;
         $count = 0;
       }
@@ -140,42 +140,45 @@ public function parseSVGPath($path) {
     return $matches[0];
   }
 
-  protected function addContourToPath($points, $startIndex, $count) {
+  protected function getSVGPath($points, $startIndex, $count) {
     $offset = 0;
     $path = "";
 
     while($offset < $count) {
-      $point_m1 = $points[ ($offset == 0) ? ($startIndex+$count-1) : $startIndex+($offset-1)%$count ];
-      $point    = $points[ $startIndex + $offset%$count ];
+      $point    = $points[ $startIndex +  $offset   %$count ];
       $point_p1 = $points[ $startIndex + ($offset+1)%$count ];
-      $point_p2 = $points[ $startIndex + ($offset+2)%$count ];
 
       if($offset == 0) {
         $path .= "M{$point['x']},{$point['y']} ";
       }
 
-      if ($point["onCurve"] && $point_p1["onCurve"]) {
-        $path .= "L{$point_p1['x']},{$point_p1['y']} ";
-        $offset++;
-      } 
-      else if ($point["onCurve"] && !$point_p1["onCurve"] && $point_p2["onCurve"]){
-        $path .= "Q{$point_p1['x']},{$point_p1['y']},{$point_p2['x']},{$point_p2['y']} ";
-        $offset += 2;
-      } 
-      else if ($point["onCurve"] && !$point_p1["onCurve"] && !$point_p2["onCurve"]){
-        $path .= "Q{$point_p1['x']},{$point_p1['y']},".$this->midValue($point_p1['x'], $point_p2['x']).",".$this->midValue($point_p1['y'], $point_p2['y'])." ";
-        $offset += 2;
-      } 
-      else if (!$point["onCurve"] && !$point_p1["onCurve"]) {
-        $path .= "Q{$point['x']},{$point['y']},".$this->midValue($point['x'], $point_p1['x']).",".$this->midValue($point['y'], $point_p1['y'])." ";
-        $offset++;
-      } 
-      else if (!$point["onCurve"] && $point_p1["onCurve"]) {
-        $path .= "Q{$point['x']},{$point['y']},{$point_p1['x']},{$point_p1['y']} ";
-        $offset++;
-      } 
+      if ($point["onCurve"]) {
+        if ($point_p1["onCurve"]) {
+          $path .= "L{$point_p1['x']},{$point_p1['y']} ";
+          $offset++;
+        }
+        else {
+          $point_p2 = $points[ $startIndex + ($offset+2)%$count ];
+          
+          if ($point_p2["onCurve"]){
+            $path .= "Q{$point_p1['x']},{$point_p1['y']},{$point_p2['x']},{$point_p2['y']} ";
+          } 
+          else {
+            $path .= "Q{$point_p1['x']},{$point_p1['y']},".$this->midValue($point_p1['x'], $point_p2['x']).",".$this->midValue($point_p1['y'], $point_p2['y'])." ";
+          } 
+          
+          $offset += 2;
+        }
+      }
       else {
-        break;
+        if ($point_p1["onCurve"]) {
+          $path .= "Q{$point['x']},{$point['y']},{$point_p1['x']},{$point_p1['y']} ";
+        }
+        else {
+          $path .= "Q{$point['x']},{$point['y']},".$this->midValue($point['x'], $point_p1['x']).",".$this->midValue($point['y'], $point_p1['y'])." ";
+        }
+        
+        $offset++;
       }
     }
 

classes/font_table_glyf.cls.php

@@ -77,7 +77,7 @@ public function toHTML(){
       }
 
       $shape = $glyph->getGlyphData();
-      $shape["SVGPath"] = $glyph->getSVGPath();
+      $shape["SVGContours"] = $glyph->getSVGContours();
       unset($shape["points"]);
       unset($shape["instructions"]);
       $shape_json = json_encode($shape);

www/js/glyph.js

@@ -12,7 +12,7 @@ var Glyph = {
   	return path.match(/([a-z])|(-?\d+(?:\.\d+)?)/ig);
   },
 
-  drawSVGPath: function(ctx, path) {
+  drawSVGContours: function(ctx, path) {
     var p = Glyph.splitPath(path);
 
     if (!p) {
@@ -28,15 +28,15 @@ var Glyph = {
       switch(v) {
         case "M": 
           ctx.beginPath();
-          ctx.moveTo(parseFloat(p[++i]), parseFloat(p[++i])); 
+          ctx.moveTo(p[++i], p[++i]); 
           break;
 
         case "L": 
-          ctx.lineTo(parseFloat(p[++i]), parseFloat(p[++i])); 
+          ctx.lineTo(p[++i], p[++i]); 
           break;
 
         case "Q": 
-          ctx.quadraticCurveTo(parseFloat(p[++i]), parseFloat(p[++i]), parseFloat(p[++i]), parseFloat(p[++i]));
+          ctx.quadraticCurveTo(p[++i], p[++i], p[++i], p[++i]);
           break;
 
         case "z": 
@@ -126,6 +126,6 @@ var Glyph = {
     ctx.strokeStyle = "black";
     ctx.globalCompositeOperation = "xor";
 
-    Glyph.drawSVGPath(ctx, shape.SVGPath);
+    Glyph.drawSVGContours(ctx, shape.SVGContours);
   }
 };