Merge pull request #178 from SixLabors/js/text-path

Fix accuracy of drawing text along a path

Author: JimBobSquarePants

samples/DrawShapesWithImageSharp/Program.cs

@@ -52,13 +52,11 @@ private static void OutputStars()
             DrawFatL();
 
             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));
+            // new RectangularPolygon(PointF.Empty, new SizeF(100, 100)));
         }
 
         private static void DrawText(string text)
@@ -73,17 +71,21 @@ private static void DrawText(string text)
 
         private static void DrawText(string text, IPath path)
         {
-            FontFamily fam = SystemFonts.Get("Arial");
-            var font = new Font(fam, 30);
+            FontFamily family = SystemFonts.Get("Arial");
+            Font font = new(family, 30);
             TextOptions textOptions = new(font)
             {
                 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");
+            glyphs.SaveImageWithPath(path, "Text-Path", text + ".png");
         }
 
         private static void DrawFatL()
@@ -223,61 +225,67 @@ private static void OutputClippedRectangle()
 
         public static void SaveImage(this IPath shape, params string[] path) => new PathCollection(shape).SaveImage(path);
 
-        public static void SaveImage(this IPathCollection shape, params string[] path)
+        public static void SaveImage(this IPathCollection collection, params string[] path)
         {
-            shape = shape.Translate(-shape.Bounds.Location) // touch top left
-                    .Translate(new Vector2(10)); // move in from top left
+            // Offset the path collection to ensure our resultant image is
+            // large enough to contain the rendered output.
+            collection = collection.Translate(-collection.Bounds.Location);
 
+            int width = (int)(collection.Bounds.Left + collection.Bounds.Right);
+            int height = (int)(collection.Bounds.Top + collection.Bounds.Bottom);
+            using var img = new Image<Rgba32>(width, height);
+
+            // Fill the canvas background and draw our shape
+            img.Mutate(i => i.Fill(Color.DarkBlue));
+
+            // Draw our path collection.
+            img.Mutate(i => i.Fill(Color.HotPink, collection));
+
+            // Ensure directory exists
             string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));
+            IODirectory.CreateDirectory(IOPath.GetDirectoryName(fullPath));
+            img.Save(fullPath);
+        }
 
-            // pad even amount around shape
-            int width = (int)(shape.Bounds.Left + shape.Bounds.Right);
-            int height = (int)(shape.Bounds.Top + shape.Bounds.Bottom);
+        public static void SaveImageWithPath(this IPathCollection collection, IPath shape, params string[] path)
+        {
+            // Offset the shape and path collection to ensure our resultant image is
+            // large enough to contain the rendered output.
+            shape = shape.Translate(-collection.Bounds.Location);
+            collection = collection.Translate(-collection.Bounds.Location);
 
-            using (var img = new Image<Rgba32>(width, height))
-            {
-                img.Mutate(i => i.Fill(Color.DarkBlue));
+            var bounds = RectangleF.Union(shape.Bounds, collection.Bounds);
+            int width = (int)(bounds.Left + bounds.Right);
+            int height = (int)(bounds.Top + bounds.Bottom);
 
-                foreach (IPath s in shape)
-                {
-                    // In ImageSharp.Drawing.Paths there is an extension method that takes in an IShape directly.
-                    img.Mutate(i => i.Fill(Color.HotPink, s));
-                }
+            using var img = new Image<Rgba32>(width, height);
 
-                // img.Draw(Color.LawnGreen, 1, new ShapePath(shape));
+            // Fill the canvas background and draw our shape
+            img.Mutate(i => i.Fill(Color.DarkBlue).Fill(Color.White.WithAlpha(.25F), shape));
 
-                // Ensure directory exists
-                IODirectory.CreateDirectory(IOPath.GetDirectoryName(fullPath));
+            // Draw our path collection.
+            img.Mutate(i => i.Fill(Color.HotPink, collection));
 
-                img.Save(fullPath);
-            }
+            // Ensure directory exists
+            string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));
+            IODirectory.CreateDirectory(IOPath.GetDirectoryName(fullPath));
+            img.Save(fullPath);
         }
 
         public static void SaveImage(this IPath shape, int width, int height, params string[] path)
             => new PathCollection(shape).SaveImage(width, height, path);
 
         public static void SaveImage(this IPathCollection shape, int width, int height, params string[] path)
         {
-            string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));
-
-            using (var img = new Image<Rgba32>(width, height))
-            {
-                img.Mutate(i => i.Fill(Color.DarkBlue));
-
-                // In ImageSharp.Drawing.Paths there is an extension method that takes in an IShape directly.
-                foreach (IPath s in shape)
-                {
-                    // In ImageSharp.Drawing.Paths there is an extension method that takes in an IShape directly.
-                    img.Mutate(i => i.Fill(Color.HotPink, s));
-                }
+            using var img = new Image<Rgba32>(width, height);
+            img.Mutate(i => i.Fill(Color.DarkBlue));
+            img.Mutate(i => i.Fill(Color.HotPink, shape));
 
-                // img.Draw(Color.LawnGreen, 1, new ShapePath(shape));
-
-                // Ensure directory exists
-                IODirectory.CreateDirectory(IOPath.GetDirectoryName(fullPath));
+            // Ensure directory exists
+            string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));
+            IODirectory.CreateDirectory(IOPath.GetDirectoryName(fullPath));
 
-                img.Save(fullPath);
-            }
+            img.Save(fullPath);
         }
     }
 }

src/ImageSharp.Drawing/ImageSharp.Drawing.csproj

@@ -17,8 +17,8 @@
     <None Include="..\..\shared-infrastructure\branding\icons\imagesharp.drawing\sixlabors.imagesharp.drawing.128.png" Pack="true" PackagePath="" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="SixLabors.Fonts" Version="1.0.0-beta16" />
-    <PackageReference Include="SixLabors.ImageSharp" Version="2.1.1-alpha.0.1" />
+    <PackageReference Include="SixLabors.Fonts" Version="1.0.0-beta16.13" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="2.1.1-alpha.0.2" />
   </ItemGroup>
   <Import Project="..\..\shared-infrastructure\src\SharedInfrastructure\SharedInfrastructure.projitems" Label="Shared" />
 </Project>