Text along a path

[jozapl]

How to draw text along a path in Uno Platform? For example, text along an arc. I tried SVG but it doesn't work. Any ideas?

[limeniye]

Hello, @jozapl.
To be honest, I've never tried it, but I think it can be done through Lottie.
Also, you can use the SkiaSharp for this case.
Let's see the two following samples:

First sample

<Page x:Class="SkiaTextWithPathUnoApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:views="using:SkiaSharp.Views.Windows">
  <Grid>
    <views:SKXamlCanvas x:Name="SkiaCanvas" PaintSurface="OnPaintCanvas"/>
  </Grid>
</Page>

private void OnPaintCanvas(object sender, SKPaintSurfaceEventArgs e)
{
    SKSurface surface = e.Surface;
    SKCanvas canvas = surface.Canvas;
    canvas.Clear(SKColors.White);

    // Creating a custom path
    using (SKPath path = new SKPath())
    {
        // Adding a custom vector path
        path.MoveTo(100, 100); // Move to start point
        path.LineTo(300, 100); // Draw a line to another point
        path.LineTo(200, 300); // Draw a line to another point
        path.Close(); // Close the path (draw a line back to the start point)

        using (SKPaint paint = new SKPaint())
        {
            paint.TextSize = 48;
            paint.IsAntialias = true;
            paint.Color = SKColors.Black;

            // Drawing text along the custom path
            canvas.DrawTextOnPath("Hello, SkiaSharp!", path, 0, 0, paint);
        }
    }
}

Second sample

<Page x:Class="SkiaTextWithPathUnoApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:views="using:SkiaSharp.Views.Windows">
  <Grid>
    <views:SKXamlCanvas x:Name="SkiaCanvas" PaintSurface="OnPaintCanvas"/>
  </Grid>
</Page>

private void OnPaintCanvas(object sender, SKPaintSurfaceEventArgs e)
{
    SKSurface surface = e.Surface;
    SKCanvas canvas = surface.Canvas;
    canvas.Clear(SKColors.White);

    // Creating your own vector path
    using (SKPath path = new SKPath())
    {
        // Adding lines and curves to the path
        path.MoveTo(100, 100); // Starting point
        path.LineTo(200, 100); // Line
        path.QuadTo(300, 100, 300, 200); // Quadratic curve
        path.CubicTo(300, 300, 200, 300, 200, 200); // Cubic curve

        using (SKPaint paint = new SKPaint())
        {
            paint.StrokeWidth = 2;
            paint.Style = SKPaintStyle.Stroke;
            paint.Color = SKColors.Black;

            // Drawing the path
            canvas.DrawPath(path, paint);
        }

        using (SKPaint paint = new SKPaint())
        {
            paint.TextSize = 24;
            paint.IsAntialias = true;
            paint.Color = SKColors.Black;

            // Drawing text along the path
            canvas.DrawTextOnPath("Hello, SkiaSharp!", path, 0, 0, paint);
        }
    }
}