Text background - highlighted text?

[ghost]

Hi there!

Does anyone know if the following is possible at all? Would like to create text like this, rendered on an angle and with a background / highlight effect?

Would love to hear your thoughts and ideas to get this implemented.

Thanks very much!

[antonfirsov]

I don't think there is a simple out of the box way to achieve this.

I would do the following:

• Load the background image (bgImage)
• Create an image fgImage with a transparent background to draw the foreground on (text + highlighting)
• Draw the lines separately on fgImage. For each line:
  • Use TextMeasurer to measure the boundary rectangle of each individual line
  • Draw a rectangle with the highlight color
  • Draw the text line
• fgImage.Mutate(c => c.Skew(...))
• Draw fgImage over bgImage (fgImage's background is transparent)

[ghost]

Thanks, what's the best way for me to get down a layer then so I can access the actual image pixels - sounds like I have to use the image pixels to find out where text is, so I can draw the background. Does that sound like the best possible solution for me or do you have any other ideas/recommendations for me to look into!? Thanks again for all your help and support!

[ghost]

@JimBobSquarePants & @antonfirsov I have built my own solution, just working on the pixels to identify text rows in order to draw background. Also built functionality to set background offset and padding, see examples generated by code below. Once I have this all tested and nicely working, I am going to post my solution here, would be great if you could give some feedback on approach and performance?! Thanks!

[antonfirsov]

Sure, if it works, it will be also helpful for other people finding the discussion.

[JimBobSquarePants]

@antonfirsov @tocsoft I've been thinking about this. TextMeasurer knows where there is a break so could we not return a type instead of a single FontRectangle containing individual line data as FontRectangles plus a Sum method to return the total?

[ghost]

@antonfirsov @JimBobSquarePants @tocsoft
As promised here my current solution for drawing text background.

Known issues:

• The background is drawn based on the lowest/highest pixel in each text line, which means the height of the background per line can be different, would be nicer to have consistent and same height for each line, regardless of the letters in the line.
• In edge cases, two backgrounds are drawn per line (characters like i,j, ;,!, etc. where the space is not covered by another character in the line), see example images.

See code and images below. Happy to hear your feedback on it.

THANK YOU!

            if (text.Background != null)
            {
                var pixelRows = new List<PixelRow>();
                short textRowIndex = 0;
                var previousPixelRowWasIncomplete = false;

                for (var y = 0; y < textLayer.Height; y++)
                {
                    var row = textLayer.GetPixelRowMemory(y);
                    var pixelRow = new PixelRow(y);

                    for (var x = 1; x < row.Span.Length; x += 2)
                    {
                        var minTextPixel = row.Span[x];
                        if (pixelRow.MinX == null && !IsTransparentPixel(minTextPixel))
                        {
                            pixelRow.MinX =
                                !IsTransparentPixel(row.Span[x - 1]) 
                                    ? x-1 
                                    : x;
                        }

                        var maxTextPixelIdx = row.Span.Length - 1 - x;
                        var maxTextPixel = row.Span[maxTextPixelIdx];
                        if (pixelRow.MaxX == null && !IsTransparentPixel(maxTextPixel))
                        {
                            pixelRow.MaxX =
                                !IsTransparentPixel(row.Span[maxTextPixelIdx + 1])
                                    ? maxTextPixelIdx + 1
                                    : maxTextPixelIdx;
                        }

                        if (pixelRow.IsComplete())
                        {
                            if (previousPixelRowWasIncomplete)
                            {
                                textRowIndex++;
                                previousPixelRowWasIncomplete = false;
                            }

                            pixelRow.TextRowIndex = textRowIndex;
                            pixelRows.Add(pixelRow);
                            break;
                        }
                    }

                    if (!pixelRow.IsComplete())
                    {
                        previousPixelRowWasIncomplete = true;
                    }
                }

                var backgroundRectangles = new List<PointF[]>();
                var groups = pixelRows.GroupBy(pr => pr.TextRowIndex);
                foreach (var group in groups)
                {
                    var topLeftX = group.Min(pr => pr.MinX) ?? 0;
                    var topLeftY = group.Min(pr => pr.Y);

                    var bottomRightX = group.Max(pr => pr.MaxX) ?? 0;
                    var bottomRightY = group.Max(pr => pr.Y);

                    var offsetX = (text.Background.Offset?.X ?? 0) * scaledFontFactor;
                    var offsetY = (text.Background.Offset?.Y ?? 0) * scaledFontFactor;

                    var padding = text.Background.Padding * scaledFontFactor;

                    backgroundRectangles.Add(
                        text.Background.JustUnderline
                            ? new[]
                                {
                                new PointF(topLeftX + offsetX - padding, bottomRightY + offsetY + padding), // bottom-left
                                new PointF(bottomRightX + offsetX + padding, bottomRightY + offsetY + padding) // bottom-right
                            }
                            : new[]
                                {
                                new PointF(topLeftX + offsetX - padding, topLeftY + offsetY - padding), // top-left
                                new PointF(bottomRightX + offsetX + padding, topLeftY + offsetY - padding), // top-right
                                new PointF(bottomRightX + offsetX + padding, bottomRightY + offsetY + padding), // bottom-right
                                new PointF(topLeftX + offsetX - padding, bottomRightY + offsetY + padding) // bottom-left
                            }
                        );
                }

                finalTextLayer.Mutate(ctx =>
                {
                    foreach (var backgroundRectangle in backgroundRectangles)
                    {
                        if (text.Background.Fill)
                        {
                            ctx.FillPolygon(Color.ParseHex(text.Background.Colour), backgroundRectangle);
                        }
                        else
                        {
                            ctx.DrawPolygon(Color.ParseHex(text.Background.Colour), text.Background.BorderThickness * scaledFontFactor, backgroundRectangle);
                        }
                    }
                });

                finalTextLayer.Mutate(ctx => ctx.DrawImage(textLayer, 1));
            }

Examples:

Issues: