Cleanup and document. Vert still buggy.

Author: JimBobSquarePants

src/ImageSharp.Drawing/Shapes/Text/PathGlyphBuilder.cs

@@ -41,29 +41,37 @@ public PathGlyphBuilder(IPath path, LayoutMode layoutMode)
         /// <inheritdoc/>
         protected override void BeginText(FontRectangle rect)
         {
+            // TODO: This uses the baseline of the text, should it be the bottom?
             this.yOffset = rect.Height;
             this.xOffset = rect.Left;
         }
 
         /// <inheritdoc/>
         protected override void BeginGlyph(FontRectangle rect)
         {
-            if (!this.isVerticalLayout)
+            // https://svgwg.org/svg2-draft/text.html#TextpathLayoutRules
+            if (this.isVerticalLayout)
             {
-                this.TransformGlyphHorizontal(rect);
+                this.TransformGlyphVertical(rect);
             }
             else
             {
-                this.TransformGlyphVertical(rect);
+                this.TransformGlyphHorizontal(rect);
             }
         }
 
         [MethodImpl(MethodImplOptions.AggressiveInlining)]
         private void TransformGlyphHorizontal(FontRectangle rect)
         {
+            // Find the intersection point. Bottom-centre for horizontal text.
             float halfWidth = rect.Width * .5F;
-            SegmentInfo point = this.path.PointAlongPath(rect.Left + halfWidth - this.xOffset);
-            Vector2 targetPoint = point.Point + new PointF(-halfWidth, rect.Top - this.yOffset);
+            Vector2 intersectionPoint = new(rect.Left + halfWidth, rect.Bottom);
+
+            // Find the point of this intersection along the given path. This ensures the correct rotation.
+            SegmentInfo point = this.path.PointAlongPath(intersectionPoint.X - this.xOffset);
+
+            // Now offset our target point since we're aligning top-left.
+            Vector2 targetPoint = point.Point + new PointF(-halfWidth, intersectionPoint.Y - rect.Height - this.yOffset);
 
             // Due to how matrix combining works you have to combine this in the reverse order of operation
             // this one rotates the glype then moves it.
@@ -74,12 +82,19 @@ private void TransformGlyphHorizontal(FontRectangle rect)
         [MethodImpl(MethodImplOptions.AggressiveInlining)]
         private void TransformGlyphVertical(FontRectangle rect)
         {
-            // TODO: Fix this. Vertical text should be rotated at the centre along a different axis.
-            // https://svgwg.org/svg2-draft/text.html#TextpathLayoutRules
+            // TODO: Fix this.
+            // Find the intersection point. Centre-centre for vertical text.
             float halfWidth = rect.Width * .5F;
-            SegmentInfo point = this.path.PointAlongPath(rect.Left + halfWidth - this.xOffset);
-            Vector2 targetPoint = point.Point + new PointF(-halfWidth, rect.Top - this.yOffset);
+            float halfHeight = rect.Height * .5F;
+            Vector2 intersectionPoint = new(rect.Left + halfWidth, rect.Top + halfHeight);
+
+            SegmentInfo point = this.path.PointAlongPath(intersectionPoint.X - this.xOffset);
 
+            // Now offset our target point since we're aligning top-left.
+            Vector2 targetPoint = point.Point + new PointF(-halfWidth, intersectionPoint.Y - halfHeight - this.yOffset);
+
+            // Due to how matrix combining works you have to combine this in the reverse order of operation
+            // this one rotates the glype then moves it.
             Matrix3x2 matrix = Matrix3x2.CreateTranslation(targetPoint - rect.Location) * Matrix3x2.CreateRotation(point.Angle - Pi, point.Point);
             this.builder.SetTransform(matrix);
         }