How to draw the rich text, and how to get the position of the typing mark?

[Cn-mjt44]

I try to draw a rich text like A<color="red">Z on image. but it don't work.
And my final goal is to create a input box on windows. So I need to get the drawing position of typing mark by character index of string.

[JimBobSquarePants]

I try to draw a rich text like A<color=\"red\">Z on image. but it don't work

Could you please explain further? What did you do? Could you provide code?

[Cn-mjt44]

GameObject.cs:

using System.Numerics;
using Silk.NET.Maths;
using Silk.NET.OpenGLES;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using SpaceFlight.UI;
namespace SpaceFlight
{
    public abstract class GameObject
    {

        public GameObject()
        {
            Game.allGameObjects.Add(this);
        }

        public bool Destoryed => !Game.allGameObjects.Contains(this);

        public bool Destory()
        {
            bool result;
            if(!Destoryed)
            {
                OnDestory();
                Game.allGameObjects.Remove(this);
                result = true;
            }
            else result = false;
            return result;
        }

        public void CheckDestoryedAndThrow()
        {
            if(Destoryed)
                throw new Exception("Item Destoryed");
        }

        public virtual void Update(double delta){}

        public virtual void Render(double delta, uint signal){}

        public virtual IEnumerable<uint> RenderSignal()
        {
            yield break;
        }

        protected virtual void OnDestory(){}
    }
    public class TestObj : GameObject
    {
        uint VAO = 0;
        float frame = 0;
        Texture? texture = null;
        TextTexture? textTexture= null;
        RenderTarget? renderTarget = null;
        static Shader? shader = null;
        static ShaderMesh? mesh = null;
        static ShaderMaterial? material = null;
        static Vector4[] vert = {
            new Vector4(-1,-1,0,0),
            new Vector4( 1, 1,0,0),
            new Vector4( 1,-1,0,0),
            new Vector4(-1, 1,0,0)
        };
        static Vector4[] color = {
            new Vector4(0,0,1,0),
            new Vector4(0,1,0,0),
            new Vector4(1,0,1,0),
            new Vector4(1,0,0,0)
        };
        static uint[] indices = { 0, 1, 2, 0, 3, 1 };

        
        static ShaderFile shaderFile = new ShaderFile("Assests/Shader/basicVertColor.glsl");
        static Image<Rgba32> image = Image.Load("Assests/Image/RimworldPlanet.gif").CloneAs<Rgba32>();



        public override void Update(double delta)
        {
            frame += (float)delta * 60;
            if(frame >= image.Frames.Count) frame = 0;
        }

        public override void Render(double delta, uint signal)
        {
            if(Game.Working)
            {
                GL gl = Game.GL;
                gl.CullFace(TriangleFace.Back);
                gl.Enable(EnableCap.CullFace);
                if(shader == null)
                {
                    VAO = gl.GenVertexArray();
                    shader = new Shader(shaderFile.VertexShader ?? throw new Exception("shader not read"), shaderFile.FragmentShader ?? throw new Exception("shader not read"));
                }
                if(mesh == null)
                {
                    Dictionary<string, List<Vector4>> meshData = new Dictionary<string, List<Vector4>>
                    {
                        { "aPos", new List<Vector4>(vert) },
                        { "aColor0", new List<Vector4>(color) }
                    };
                    mesh = new ShaderMesh(new List<uint>(indices), meshData);
                }
                if(texture == null)
                {
                    image.Mutate(x => x.Flip(FlipMode.Vertical));
                    texture = new Texture(SizedInternalFormat.Rgba8,(uint)image.Width,(uint)image.Height);
                    texture.SetData(image,(int)frame);
                    texture.LinearFilter = true;
                }
                if(textTexture == null)
                {
                    TextHelper.defaultFontSize = 128;
                    textTexture = TextTexture.CreateByText("A<color=\"red\">Z",null,null,null,lineSpacing:1);
                }
                if(material == null)
                {
                    material = new ShaderMaterial();
                    material.SetUniformTexture("texture0", texture);
                    material.SetUniformTexture("texture1", textTexture);
                    material.SetUniformMatrix4("m2w",Matrix4X4.Transpose(Matrix4X4.CreateFromQuaternion(Quaternion<float>.Identity)));
                    material.SetUniformMatrix4("w2c",Matrix4X4.Transpose(Matrix4X4.CreateLookAt(
                        new Vector3D<float>(0,0,-2.5f),
                        new Vector3D<float>(0,0,0),
                        new Vector3D<float>(0,1,0)
                    )));
                    // texture.
                }
                if(renderTarget == null)
                {
                    renderTarget = new RenderTarget(new Texture(SizedInternalFormat.Rgba16f,(uint)image.Width,(uint)image.Height),true);
                    RenderTarget.Current = renderTarget;
                    gl.ClearColor(0.25f, 0.5f, 1, 1);
                    gl.Clear(ClearBufferMask.ColorBufferBit);
                    RenderTarget.Current = null;
                    gl.ClearColor(0,0,0,1);
                }
                float aspectRatio = Game.Window.Size.X / (float)Game.Window.Size.Y;
                material.SetUniformMatrix4("c2s",Matrix4X4.Transpose(Matrix4X4.CreatePerspectiveFieldOfView(
                    MathF.PI*0.5f,aspectRatio,0.01f,1000f
                )));
                // gl.Enable(EnableCap.LineSmooth);
                texture.SetData(image,(int)frame);
                gl.LineWidth(5);
                gl.BindVertexArray(VAO);
                shader.UseProgram();
                shader.BindShaderMesh(mesh);
                shader.BindShaderMaterial(material);

                // gl.DrawElements(PrimitiveType.Triangles, (uint)indices.Length, DrawElementsType.UnsignedInt,new ReadOnlySpan<uint>(indices));
                gl.DrawElements(PrimitiveType.Triangles, mesh.IndicesLength, DrawElementsType.UnsignedInt,ReadOnlySpan<uint>.Empty);
                // gl.DrawArrays(PrimitiveType.Lines,0,(uint)indices.Length);

            }

        }

        protected override void OnDestory()
        {
            texture?.Destory();
            texture = null;
            textTexture?.Destory();
            textTexture = null;
            renderTarget?.Destory();
            renderTarget = null;
            if(shader != null && !shader.Destoryed)
            {
                shader.Destory();
                shader = null;
            }
            if(mesh != null && !mesh.Destoryed)
            {
                mesh.Destory();
                mesh = null;
            }
            if(material != null && !material.Destoryed)
            {
                material.Destory();
                material = null;
            }
        }


        public override IEnumerable<uint> RenderSignal()
        {
            yield return 0;
        }
    }
}

TextTexture.cs

using System.Numerics;
using System.Runtime.InteropServices.Marshalling;
using Silk.NET.OpenGLES;
using SixLabors.Fonts;
using SixLabors.Fonts.Unicode;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.Drawing.Processing.Processors.Text;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace SpaceFlight.UI
{
    public class TextTexture : Texture
    {
        public float defaultFontSize = 16f;
        private bool needUpdate = true;
        private Image<Rgba32> innerImage;
        private HashSet<FontFamily>? defaultFonts = null;
        private Font? defaultFont = null;
        private RichTextOptions? defaultRichTextOptions = null;

        public List<FontFamily>? DefaultFonts => defaultFonts != null ? new (defaultFonts) : null;

        public FontFamily? DefaultFontFamily => defaultFont?.Family ?? defaultFonts?.FirstOrDefault();

        public Font? DefaultFont
        {
            get
            {
                FontFamily? fontFamily = DefaultFontFamily;
                if ((defaultFont == null || defaultFont.Size != defaultFontSize) && fontFamily != null)
                {
                    defaultFont = new Font(fontFamily.Value, defaultFontSize);
                }
                return defaultFont;
            }
        }

        public RichTextOptions? DefaultRichTextOptions
        {
            get
            {
                Font? defaultFont = DefaultFont;
                List<FontFamily>? defaultFonts = DefaultFonts;
                if(defaultFont != null && defaultFonts != null)
                {
                    if(defaultRichTextOptions == null)
                    {
                        defaultRichTextOptions = new RichTextOptions(defaultFont)
                        {
                            FallbackFontFamilies = defaultFonts,
                            ColorFontSupport = ColorFontSupport.MicrosoftColrFormat,
                        };
                    }
                    else if(defaultRichTextOptions.Font != defaultFont)
                    {
                        defaultRichTextOptions.Font = defaultFont;
                        defaultRichTextOptions.FallbackFontFamilies = defaultFonts;
                        defaultRichTextOptions.ColorFontSupport = ColorFontSupport.MicrosoftColrFormat;
                    }
                }
                return defaultRichTextOptions;
            }
        }

        public TextTexture(uint width, uint height) : base(SizedInternalFormat.Rgba8, width, height, 0, false)
        {
            innerImage = new Image<Rgba32>((int)width, (int)height);
        }

        public TextTexture(Vector2 size) : this((uint)Math.Ceiling(size.X), (uint)Math.Ceiling(size.Y)){}
        
        
        public void DrawText(string text, Font? font, Color? fill, Color? outline)
            => DrawText(text, fill != null ? Brushes.Solid(fill.Value) : Brushes.Solid(Color.White), outline != null ? Pens.Solid(outline.Value) : Pens.Solid(Color.Black), font);
        
        public void DrawText(
            string text,
            Brush? fill,
            Pen? outline,
            Font? font,
            IReadOnlyList<FontFamily>? fallbackFontFamilies = null,
            HorizontalAlignment horizontalAlignment = HorizontalAlignment.Left,
            VerticalAlignment verticalAlignment = VerticalAlignment.Top,
            TextJustification textJustification = TextJustification.None,
            ColorFontSupport colorFontSupport = ColorFontSupport.MicrosoftColrFormat,
            TextDirection textDirection = TextDirection.LeftToRight,
            WordBreaking wordBreaking = WordBreaking.Standard,
            KerningMode kerningMode = KerningMode.Standard,
            LayoutMode layoutMode= LayoutMode.HorizontalTopBottom,
            Vector2 origin = default,
            float wrappingLength = -1,
            float lineSpacing = 1,
            float dpi = 72
            )
        {
            RichTextOptions richTextOptions = new RichTextOptions(font ?? defaultFont ?? TextHelper.DefaultFont);
            richTextOptions.FallbackFontFamilies = fallbackFontFamilies ?? DefaultFonts ?? TextHelper.DefaultFonts;
            richTextOptions.HorizontalAlignment = horizontalAlignment;
            richTextOptions.VerticalAlignment = verticalAlignment;
            richTextOptions.TextJustification = textJustification;
            richTextOptions.ColorFontSupport = colorFontSupport;
            richTextOptions.TextDirection = textDirection;
            richTextOptions.WordBreaking = wordBreaking;
            richTextOptions.KerningMode = kerningMode;
            richTextOptions.LayoutMode = layoutMode;
            richTextOptions.Origin = origin;
            richTextOptions.WrappingLength = wrappingLength;
            richTextOptions.LineSpacing = lineSpacing;
            richTextOptions.Dpi = dpi;
            DrawText(text, richTextOptions, fill ?? Brushes.Solid(Color.White), outline ?? Pens.Solid(Color.Black));
        }
        
        public void DrawText(string text, RichTextOptions? textOptions = null, Brush? fill = null, Pen? outline = null)
        {
            textOptions = textOptions ?? DefaultRichTextOptions ?? TextHelper.DefaultRichTextOptions;
            fill = fill ?? Brushes.Solid(Color.White);
            outline = outline ?? Pens.Solid(Color.Black);
            innerImage.Mutate(i => i.Clear(Color.Transparent));
            innerImage.Mutate(i => i.DrawText(textOptions, text, fill, outline));
            innerImage.Mutate(i => i.Flip(FlipMode.Vertical));
            needUpdate = true;
        }

        protected override void BeforeBindTexture()
        {
            if(needUpdate)
            {
                SetData(innerImage, 0);
            }
        }

        public static TextTexture CreateByText(string text, Font? font, Color? fill, Color? outline)
            => CreateByText(text, fill != null ? Brushes.Solid(fill.Value) : Brushes.Solid(Color.White), outline != null ? Pens.Solid(outline.Value) : Pens.Solid(Color.Black), font);


        public static TextTexture CreateByText(
            string text,
            Brush? fill,
            Pen? outline,
            Font? font,
            IReadOnlyList<FontFamily>? fallbackFontFamilies = null,
            HorizontalAlignment horizontalAlignment = HorizontalAlignment.Left,
            VerticalAlignment verticalAlignment = VerticalAlignment.Top,
            TextJustification textJustification = TextJustification.None,
            ColorFontSupport colorFontSupport = ColorFontSupport.MicrosoftColrFormat,
            TextDirection textDirection = TextDirection.LeftToRight,
            WordBreaking wordBreaking = WordBreaking.Standard,
            KerningMode kerningMode = KerningMode.Standard,
            LayoutMode layoutMode = LayoutMode.HorizontalTopBottom,
            float wrappingLength = -1,
            float lineSpacing = 1,
            float dpi = 72
            )
        {
            RichTextOptions richTextOptions = new RichTextOptions(font ?? TextHelper.DefaultFont);
            richTextOptions.FallbackFontFamilies = fallbackFontFamilies ?? TextHelper.DefaultFonts;
            richTextOptions.HorizontalAlignment = horizontalAlignment;
            richTextOptions.VerticalAlignment = verticalAlignment;
            richTextOptions.TextJustification = textJustification;
            richTextOptions.ColorFontSupport = colorFontSupport;
            richTextOptions.TextDirection = textDirection;
            richTextOptions.WordBreaking = wordBreaking;
            richTextOptions.KerningMode = kerningMode;
            richTextOptions.LayoutMode = layoutMode;
            richTextOptions.WrappingLength = wrappingLength;
            richTextOptions.LineSpacing = lineSpacing;
            richTextOptions.Dpi = dpi;
            return CreateByText(text, richTextOptions, fill ?? Brushes.Solid(Color.White), outline ?? Pens.Solid(Color.Black));
        }

        public static TextTexture CreateByText(string text, RichTextOptions? textOptions = null, Brush? fill = null, Pen? outline = null)
        {
            if(textOptions != null) textOptions.Origin = default;
            Vector2 size = TextHelper.TextContextSize(text,textOptions);
            TextTexture result = new TextTexture(size);
            result.defaultFont = textOptions?.Font;
            if(result.defaultFont != null)
            {
                result.defaultFontSize = result.defaultFont.Size;
                result.defaultRichTextOptions = textOptions;
                result.defaultFonts = [result.defaultFont.Family];
            }
            result.DrawText(text, null, fill, outline);
            return result;
        }
    }
}

textTexture = TextTexture.CreateByText("A<color=\"red\">Z",null,null,null,lineSpacing:1) will create a OpenGL texture that writed A<color="red">Z. but it not going to draw white A and red Z on texture.

And I need some method to get where does the glyph of character draw when I drawing an image for string.

[JimBobSquarePants]

Why do you expect the library to parse some random syntax you've introduced? <color=\"red\"> is absolutely meaningless.

To draw rich text you need to provide the options with a set of text runs describing what you want.

TextRuns

https://docs.sixlabors.com/api/ImageSharp.Drawing/SixLabors.ImageSharp.Drawing.Processing.RichTextOptions.html#SixLabors_ImageSharp_Drawing_Processing_RichTextOptions_TextRuns

RichTextRun

https://docs.sixlabors.com/api/ImageSharp.Drawing/SixLabors.ImageSharp.Drawing.Processing.RichTextRun.html