"Fix" horizontal layout.

Author: JimBobSquarePants

samples/DrawShapesWithImageSharp/Program.cs

@@ -54,11 +54,7 @@ private static void OutputStars()
             DrawText("Hello World");
             DrawText(
                 "Hello World Hello World Hello World Hello World Hello World Hello World Hello World",
-                new Path(new CubicBezierLineSegment(
-                new Vector2(0, 0),
-                new Vector2(150, -150),
-                new Vector2(250, -150),
-                new Vector2(400, 0))));
+                new EllipsePolygon(PointF.Empty, 100));
         }
 
         private static void DrawText(string text)
@@ -79,8 +75,12 @@ private static void DrawText(string text, IPath path)
             {
                 WrappingLength = path.ComputeLength(),
                 VerticalAlignment = VerticalAlignment.Top,
-                HorizontalAlignment = HorizontalAlignment.Center,
+                HorizontalAlignment = HorizontalAlignment.Left,
+
+                // Enable this to test vertical layout mode.
+                LayoutMode = LayoutMode.VerticalLeftRight
             };
+
             IPathCollection glyphs = TextBuilder.GenerateGlyphs(text, path, textOptions);
 
             glyphs.SaveImage("Text-Path", text + ".png");
@@ -236,7 +236,7 @@ public static void SaveImage(this IPathCollection shape, params string[] path)
 
             using (var img = new Image<Rgba32>(width, height))
             {
-                img.Mutate(i => i.Fill(Color.DarkBlue));
+                img.Mutate(i => i.Fill(Color.DarkBlue).Draw(Color.HotPink, 3, new EllipsePolygon(width / 2F, height / 2F, 93)));
 
                 foreach (IPath s in shape)
                 {

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

@@ -3,6 +3,7 @@
 
 using System;
 using System.Numerics;
+using System.Runtime.CompilerServices;
 using SixLabors.Fonts;
 
 namespace SixLabors.ImageSharp.Drawing.Text
@@ -14,13 +15,16 @@ internal sealed class PathGlyphBuilder : GlyphBuilder
     {
         private const float Pi = MathF.PI;
         private readonly IPathInternals path;
+        private readonly bool isVerticalLayout;
+        private float xOffset;
         private float yOffset;
 
         /// <summary>
         /// Initializes a new instance of the <see cref="PathGlyphBuilder"/> class.
         /// </summary>
         /// <param name="path">The path to render the glyphs along.</param>
-        public PathGlyphBuilder(IPath path)
+        /// <param name="layoutMode">The mode to determine the layout of the text.</param>
+        public PathGlyphBuilder(IPath path, LayoutMode layoutMode)
         {
             if (path is IPathInternals internals)
             {
@@ -30,22 +34,61 @@ public PathGlyphBuilder(IPath path)
             {
                 this.path = new ComplexPolygon(path);
             }
+
+            this.isVerticalLayout = IsVertical(layoutMode);
         }
 
         /// <inheritdoc/>
-        protected override void BeginText(FontRectangle rect) => this.yOffset = rect.Height;
+        protected override void BeginText(FontRectangle rect)
+        {
+            this.yOffset = rect.Height;
+            this.xOffset = rect.Left;
+        }
 
         /// <inheritdoc/>
         protected override void BeginGlyph(FontRectangle rect)
         {
-            SegmentInfo point = this.path.PointAlongPath(rect.Left);
+            if (!this.isVerticalLayout)
+            {
+                this.TransformGlyphHorizontal(rect);
+            }
+            else
+            {
+                this.TransformGlyphVertical(rect);
+            }
+        }
 
-            Vector2 targetPoint = point.Point + new PointF(0, rect.Top - this.yOffset);
+        [MethodImpl(MethodImplOptions.AggressiveInlining)]
+        private void TransformGlyphHorizontal(FontRectangle rect)
+        {
+            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);
 
             // 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);
         }
+
+        [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
+            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);
+
+            Matrix3x2 matrix = Matrix3x2.CreateTranslation(targetPoint - rect.Location) * Matrix3x2.CreateRotation(point.Angle - Pi, point.Point);
+            this.builder.SetTransform(matrix);
+        }
+
+        [MethodImpl(MethodImplOptions.AggressiveInlining)]
+        private static bool IsVertical(LayoutMode mode)
+        {
+            const LayoutMode vertical = LayoutMode.VerticalLeftRight | LayoutMode.VerticalRightLeft;
+            return (mode & vertical) > 0;
+        }
     }
 }

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

@@ -36,7 +36,7 @@ public static IPathCollection GenerateGlyphs(string text, TextOptions textOption
         /// <returns>The <see cref="IPathCollection"/></returns>
         public static IPathCollection GenerateGlyphs(string text, IPath path, TextOptions textOptions)
         {
-            PathGlyphBuilder glyphBuilder = new(path);
+            PathGlyphBuilder glyphBuilder = new(path, textOptions.LayoutMode);
             TextRenderer renderer = new(glyphBuilder);
 
             renderer.RenderText(text, textOptions);