当前位置: 首页>大数据>正文

SkiaSharp使用SKCanvas.DrawText绘制2D文本时部分字符渲染位置异常。

Skia是一个开源的 2D 图形库,支持多种平台和语言,可以用于绘制各种图形和效果,SkiaSharp是其.Net版本。

在绘制文本时,一般做法是:

private void SkContainer_PaintSurface(object? sender, SkiaSharp.Views.Desktop.SKPaintSurfaceEventArgs e)
{
	var canvas = e.Surface.Canvas;
	canvas.Clear(SKColors.SkyBlue);
    using var paint = new SKPaint(new SKFont(SKTypeface.FromFamilyName("Microsoft Sans Serif")))
    {
           Color = SKColors.Black,
           IsAntialias = true,
           TextSize = 50,
           IsStroke = false,
           TextAlign = SKTextAlign.Left,
       };
	string msg = "Hello World";
	canvas.DrawText(msg, 10, 10, paint);
}

绘制渲染显示效果如下:
SkiaSharp使用SKCanvas.DrawText绘制2D文本时部分字符渲染位置异常。,在这里插入图片描述,第1张

通常都没什么问题,但当遇到多语言中比较特殊的字符,比如泰语“???????”时,就变成了:
SkiaSharp使用SKCanvas.DrawText绘制2D文本时部分字符渲染位置异常。,在这里插入图片描述,第2张
对比WPS中显示:
SkiaSharp使用SKCanvas.DrawText绘制2D文本时部分字符渲染位置异常。,在这里插入图片描述,第3张

注意看,第一个字符最上面的竖线莫名其妙的往下偏移,和下面的部分重叠了。
幸运的是,大神Matthew Leibowitz开发了另外一个更强大的文本组件库可以使用:
SkiaSharp使用SKCanvas.DrawText绘制2D文本时部分字符渲染位置异常。,在这里插入图片描述,第4张
RickTextKit
更幸运的,RickTextKit可以跟SkiaSharp 无缝衔接,以前的代码不用做过多的修改,便可完成调整,
首先添加包引用:
Install-Package Topten.RichTextKit
然后添加命名空间:
using Topten.RichTextKit;

原代码调整如下:

private void SkContainer_PaintSurface(object? sender, SkiaSharp.Views.Desktop.SKPaintSurfaceEventArgs e)
{
	var canvas = e.Surface.Canvas;
	canvas.Clear(SKColors.SkyBlue);
	string msg = "???????";
	/*
    using var paint = new SKPaint(new SKFont(SKTypeface.FromFamilyName("Microsoft Sans Serif")))
    {
           Color = SKColors.Black,
           IsAntialias = true,
           TextSize = 50,
           IsStroke = false,
           TextAlign = SKTextAlign.Left,
       };
	canvas.DrawText(msg, 10, 10, paint);
	*/
	
	//使用RickTextKit中的RichString进行渲染
    var rs = new RichString()
            .Alignment(Topten.RichTextKit.TextAlignment.Left)
            .LetterSpacing(20)
            .FontFamily("Microsoft Sans Serif")
            //.MarginBottom(20)
            //.Add("Welcome To RichTextKit", fontSize: 24, fontWeight: 700, fontItalic: true)
            .Paragraph().Alignment(Topten.RichTextKit.TextAlignment.Left)
            .FontSize(50)
            .Add(msg);

    rs.Paint(canvas, new SKPoint(200, 0));	
}

渲染效果如下,可以看到,第一个字符上面的竖线已经正常显示:
SkiaSharp使用SKCanvas.DrawText绘制2D文本时部分字符渲染位置异常。,在这里插入图片描述,第5张

RickTextKit还有其它更加丰富强大的功能,有需要的可自行学习使用。


https://www.xamrdz.com/bigdata/7s81996011.html

相关文章: