Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CanvasDrawingSession.DrawGlyphRun renders emojis in monochrome when using color font and CanvasDrawTextOptions.EnableColorFont option #937

Open
MaxWellHays opened this issue Sep 28, 2023 · 2 comments

Comments

@MaxWellHays
Copy link

MaxWellHays commented Sep 28, 2023

I am currently working on a UWP application that requires custom text layouting logic. I have been experimenting with the CanvasDrawingSession.DrawGlyphRun method in Win2D to achieve this, as it provides more control over glyph positioning compared to the previous method I was using, CanvasDrawingSession.DrawTextLayout. However, I have encountered an issue where color emojis are not being rendered in color when using DrawGlyphRun.

To provide some context, I was previously using multiple instances of CanvasTextLayout with DrawTextLayout, but due to new requirements, I need more control over glyphs position. While I was able to convert all existing functionality from DrawTextLayout to DrawGlyphRun, the issue with color emoji rendering remains.

As a workaround, I am considering using DrawText in places where I need to render color emojis, but I would like to know if there is a better way to handle this or if I am missing something. Additionally, I am also considering implementing this logic directly in C++ like in the DWriteColorGlyph sample.

Below is a basic control implementation which renders text using all 3 available methods and shows that emoji rendered using DrawGlyphRun is shown in monochrome:

public sealed partial class BasicDrawGlyphRunControl : UserControl
{
    private const string Text = "😀";
    private readonly CanvasGlyph[] _glyphs;
    private readonly IReadOnlyList<KeyValuePair<CanvasCharacterRange, CanvasScaledFont>> _font;
    private readonly CanvasTextFormat _textFormat = new()
    {
        FontSize = 36,
        Options = CanvasDrawTextOptions.EnableColorFont,
    };
    private CanvasSolidColorBrush? _textBrush;

    public BasicDrawGlyphRunControl()
    {
        DataContext = this;
        InitializeComponent();

        var textAnalyzer = new CanvasTextAnalyzer(Text, CanvasTextDirection.LeftToRightThenTopToBottom);

        _font = textAnalyzer.GetFonts(_textFormat);
        var scripts = textAnalyzer.GetScript();
        _glyphs = textAnalyzer.GetGlyphs(_font[0].Key, _font[0].Value.FontFace, _textFormat.FontSize, isSideways: false, isRightToLeft: false, scripts[0].Value);
    }

    private void OnCanvasDraw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        _textBrush ??= new CanvasSolidColorBrush(sender, Colors.Black);

        // DrawText
        args.DrawingSession.DrawText(Text, new Vector2(0, 0), _textBrush, _textFormat);

        // DrawTextLayout
        var textLayout = new CanvasTextLayout(sender, Text, _textFormat, float.PositiveInfinity, float.PositiveInfinity)
            {
                Options = CanvasDrawTextOptions.EnableColorFont,
            };
        args.DrawingSession.DrawTextLayout(textLayout, new Vector2(50, 0), _textBrush);

        // DrawGlyphRun
        var fontFace = _font[0].Value.FontFace;
        var position = new Vector2(100, (fontFace.Ascent + fontFace.LineGap) * _textFormat.FontSize);
        args.DrawingSession.DrawGlyphRun(position, fontFace, _textFormat!.FontSize, _glyphs!, false, 0, _textBrush);
    }
}

Here is a screenshot of result control:
image

@lgBlog
Copy link

lgBlog commented Oct 1, 2023

private readonly CanvasTextFormat _textFormat = new()
{
FontSize = 36,
};

This property is assigned outside.
_textFormat.Options = CanvasDrawTextOptions.EnableColorFont;

@MaxWellHays
Copy link
Author

private readonly CanvasTextFormat _textFormat = new() { FontSize = 36, };

This property is assigned outside. _textFormat.Options = CanvasDrawTextOptions.EnableColorFont;

This change doesn't fix the issue, unfortunatelly, the emoji is still rendered in monochrome for DrawGlyphRun.
Here is my modified sample.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants