Table of Contents using new custom skia build

[leandrobattochio]

row.RelativeItem()
    .PaddingHorizontal(2)
    .AlignBottom()
    .TranslateY(-3).Height(1)
    .Canvas((canvas, space) =>
{
    // best to statically cache
    using var paint = new SKPaint
    {
        StrokeWidth = space.Height,
        PathEffect = SKPathEffect.CreateDash(new float[] { 1, 3 }, 0)
    };

    canvas.DrawLine(0, 0, space.Width, 0, paint);
});

row.AutoItem().Text(text =>
{
    text.BeginPageNumberOfSection(locationName);
});

So the old code used to work like this. It says that .Canvas() is obsolete and I should use .Svg() but I have no idea how.

row.RelativeItem()
    .PaddingHorizontal(2)
    .AlignBottom()
    .TranslateY(-3).Height(1)
    .Svg((size) =>
    {
        return @$"<svg height=""{size.Height}"" width=""{size.Width}"">
                  <!-- Add your dots here -->
                  <circle cx=""10"" cy=""0"" r=""1.5"" fill=""black"" />
                  <circle cx=""30"" cy=""0"" r=""1.5"" fill=""black"" />
                  <circle cx=""50"" cy=""0"" r=""1.5"" fill=""black"" />
                  <!-- Add more dots as needed -->
                </svg>";
    });

I tried something like this, it renders kinda ugly, still needs some math to adjust for text length and page number (which is also not working) and quantity of dots.

There must be a better way to do this?

[MarcinZiabek]

You can use this SVG property to achieve the effect: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

Notice: I haven't tested if Skia supports it, please let me know when you find out. As far as I see, it does exist in the Skia code.

In the future versions of QuestPDF, I would like to revisit introducing certain graphics capabilities, e.g. dashed lines or rounded borders.

[leandrobattochio]

<svg height="3" width="{size.Width}">
  <line x1="0" y1="1" x2="{size.Width}" y2="1" stroke="black" stroke-dasharray="4"/>
</svg>

This rendered but I can't get rid of that connection between the dashes. I can only have this effect with lines? can't I have a line full of dots instead of a rectangle ?

Btw, this is how the same svg is rendered in chrome:

--- Edit ---

I gave up on this method and reused all existing code with your SkiaSharpRasterized extension method. The only thing missing now is BeginPageNumberOfSection is not working properly

[MarcinZiabek]

I was able to remove the ugly line by adding the fill="none" property.

.Content()
.Padding(10)
.Width(200)
.Scale(3)
.Svg(context => 
    @$"<svg height=""1"" width=""{context.Width}"">
      <line x1=""0"" y1=""0"" x2=""{context.Width}"" y2=""0"" stroke-width=""1"" fill=""none"" stroke=""black"" stroke-dasharray=""2 2""/>
    </svg>
    ");

[leandrobattochio]

Do you think this is more performatic than the old method with SkiaSharpRasterized extension ?

[MarcinZiabek]

I don't expect any noticeable performance differences. The SVG-based approach produces pixel-perfect results regardless of how much you zoom in, while the rasterized version requires SkiaSharp to be added as a dependency and may become blurry at high zoom levels. I consider both solutions as good.