在 WPF 中使用 SkiaSharp 模糊文本

Posted

技术标签:

【中文标题】在 WPF 中使用 SkiaSharp 模糊文本【英文标题】:Blurry text with SkiaSharp in WPF 【发布时间】:2017-01-25 22:28:58 【问题描述】:

我正在使用 SkiaSharp 在 WPF 中绘制文本。

http://lostindetails.com/blog/post/SkiaSharp-with-Wpf

https://github.com/8/SkiaSharp-Wpf-Example

如您所见,文字不清晰。

通过将文本与标题中的 MainWindow 测试进行比较,您可以很容易地注意到这一点。

可能是什么问题?

【问题讨论】:

放大位图时很容易看到。窗口标题使用 ClearType 抗锯齿,这是制造桌面操作系统的公司的默认设置。窗口文本使用灰度抗锯齿渲染,这是制造移动操作系统的公司的默认设置。猫和丑狗。 Check this. 谢谢汉斯。我仍在努力寻找解决方案。 【参考方案1】:

很可能是您没有以足够高的分辨率进行渲染。我在 SurfaceBook 显示器上遇到了这种情况,但在我的外接显示器上没有。您实际上必须创建一个比您实际需要的“更大”的表面。比如我的SurfaceBook有300%的缩放,所以我得先得到窗口的宽度,然后乘以3:

https://github.com/mono/SkiaSharp/blob/master/source/SkiaSharp.Views/SkiaSharp.Views.WPF/SKElement.cs#L57-L61

var m = PresentationSource.FromVisual(this).CompositionTarget.TransformToDevice;
var dpiX = m.M11;
var dpiY = m.M22;
var width = (int)(ActualWidth * dpiX);
var height = (int)(ActualHeight * dpiY);

您可以使用 NuGet 中预先创建的视图,而不必自己执行此操作:https://www.nuget.org/packages/SkiaSharp.Views

然后您可以直接输入SKElement,如本示例所示:

https://github.com/mono/SkiaSharp/blob/master/samples/WPFSample/WPFSample/MainWindow.xaml#L28

<views:SKElement x:Name="canvas" PaintSurface="OnPaintCanvas" />

【讨论】:

嗨,马修,谢谢你的好消息。我从 git 下载了最新版本,但我无法构建我的解决方案。找不到类型 SK3dView。 不如直接从github.com/mono/SkiaSharp/releases/tag/v1.56.0下载samples 主分支不稳定,如果要构建请使用v1.56.0标签 谢谢马修。我回家时会看看他们。斯基亚看起来很有前途。我希望我能成功。 您知道是否可以旋转文本吗? ***.com/questions/41908497/… 我发布了一个答案,但canvas.Rotate(x);canvas.DrawText(text); 是正确的。你只是在调整绘图矩阵。【参考方案2】:

根据我的经验,如果您真的想要 WPF 中漂亮而清晰的文本,则必须通过 SkiaSharp.HarfBuzz 使用文本整形 - 它以亚像素精度定位字母,然后使用 canvas.DrawPositionedText()。

【讨论】:

以上是关于在 WPF 中使用 SkiaSharp 模糊文本的主要内容,如果未能解决你的问题,请参考以下文章

SkiaSharp 之 WPF 自绘 五环弹动球(案例版)

SkiaSharp 之 WPF 自绘弹跳球(案例版)

文本渲染仍然模糊:WPF 应用程序的最佳字体?

SkiaSharp 之 WPF 自绘 拖曳小球(案例版)

SkiaSharp 之 WPF 自绘 投篮小游戏(案例版)

如何使用 SkiaSharp 测量尾随空格?