dotnet 简单聊聊 Skia 里的 SKFontMetrics 的各项属性作用

news/2025/3/9 10:47:48/文章来源:https://www.cnblogs.com/lindexi/p/18621674

熟悉文本排版的伙伴也许对于字体的 Metrics 概念不陌生,在 Skia 里面提供的 SKFontMetrics 就包含了从字体信息里面所获取的多项信息。只是略微有所不同的是 Skia 多加了对字体大小的加工,即 SKFontMetrics 获取到的属性已经是和 SKFont 的 Size 相关

如下图所示,是我绘制的示意图

通过以上示意图再配合咱小学学到的四线三格知识,大概就可以明白各个属性的含义了。基线是排版里面一个重要的概念,基线(Baseline)是字母(拉丁字母、希腊字母、西里尔字母)放置的水平线。排版里面对齐基线非常重要

如 【SkiaSharp绘图04】SKPaint详解(二)FakeBoldText/FilterQuality/FontMetrics/FontSpacing/ImageFilter_skiasharp 字体-CSDN博客 博客所述,各属性含义如下

  • Top:表示字体基线(baseline)以上的最高点的坐标。对于大多数拉丁字母,这个值通常是负的,因为大多数字形的顶部在基线之上。
  • Ascent:表示字体的上升(ascent)值,即从基线到字体最高点的距离。正值表示从基线向上的距离,通常包括字符顶部的额外空间。
  • Descent:表示字体的下降(descent)值,即从基线向下到字体最低点的距离。正值表示从基线向下的距离,通常包括字符底部的额外空间。
  • Bottom:表示字体基线以下的最低点的坐标。这个值通常是负的,因为大多数字形的底部在基线以下。
  • Leading:表示字体的行间距(leading),即每行文字之间的额外空间。它是上一行 descent 到下一行 ascent 之间的间距。
  • CapHeight:表示大写字母的高度,即大写字母的顶部到基线的距离。这个值对于调整字体大小和行高很有用。
  • XHeight:表示小写字母的高度,即小写字母 x 的顶部到基线的距离。它通常用于调整字体大小和行高,以确保小写字母的清晰显示

由此可以看到和 DriectX 的 DWRITE_FONT_METRICS 结构体比较相似

在 Skia 里面,通过 DrawText 方法绘制文本时,传入的 X 和 Y 属于 baseline 基线的坐标,而不是文本渲染的左上角坐标。如以下的小测试代码所示

            using var paint = new SKPaint();paint.Color = SKColors.Blue;paint.Style = SKPaintStyle.Stroke;paint.IsAntialias = true;var marginLeft = 35;var marginTop = 30;// 在基线绘制一条线,用于测试字体的基线var baseline = 100;skCanvas.DrawLine(marginLeft, baseline + marginTop, 300 + marginLeft, baseline + marginTop, paint);// 尝试绘制文本内容var text = "asdfghijpqWER";paint.TextSize = 30;skCanvas.DrawText(text, marginLeft, baseline + marginTop, paint);

此时可见文本是绘制在蓝色线上的,且是基线部分绘制对齐蓝线,运行之后的界面效果大概如下

在 Skia 里面计算出 baseline 基线的方法是通过 Ascent 属性计算出来的,在 Skia 里面取 Ascent 的绝对值就是 baseline 基线的值

排版里面的字高就是再 baseline + Descent 的值,即 |Ascent| + Descent 的值。排版的字高不等同与渲染字高,渲染字高在不考虑合写字情况下,一般就是 Top 线到 Bottom 线之间的高度就是渲染字高度。正常咱是不关心渲染字高,最多只关心排版字高

行距部分会比较复杂,我自己建立的文本库就准备尝试模拟 WPF 的行距算法或 PPT 的行距算法,详细请看 dotnet OpenXML 聊聊 PPT 文本行距行高计算公式

本文代码放在 github 和 gitee 上,可以使用如下命令行拉取代码。我整个代码仓库比较庞大,使用以下命令行可以进行部分拉取,拉取速度比较快

先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码

git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 9c035b4fc813169ead14567f8d40bdb9c382ec4c

以上使用的是国内的 gitee 的源,如果 gitee 不能访问,请替换为 github 的源。请在命令行继续输入以下代码,将 gitee 源换成 github 源进行拉取代码。如果依然拉取不到代码,可以发邮件向我要代码

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
git pull origin 9c035b4fc813169ead14567f8d40bdb9c382ec4c

获取代码之后,进入 SkiaSharp/RijojahijayNoherrerhu 文件夹,即可获取到源代码

更多技术博客,请参阅 博客导航

参考文档:

【SkiaSharp绘图04】SKPaint详解(二)FakeBoldText/FilterQuality/FontMetrics/FontSpacing/ImageFilter_skiasharp 字体-CSDN博客

《冒号和比号的体式及其应用问题》 林穗芳 人民出版社 2008

中文字体的FontMetrics解析-CSDN博客

术语表 - FontForge 与字体设计 - UDN开源文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/856659.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LVGL 移植到 STM32 通法 ( 例:LVGL 9.2.2 到 STM32F429 )

心法: 以往看过很多的移植教程、在 Keil 里面添加很多的文件分组、进到 LVGL 源码文件夹,进进出出多级目录添加很多的源码文件、这个添加,那个不需要添加,着实吓人 + 劝退人。1. Keil 里面的文件分组的 组织结构、取名对编译根本不重要,只是方便程序员管理文件。 不过要注…

使用CSS3写一个图片左右切换的弹性动画

要使用CSS3创建一个图片左右切换的弹性动画,你可以使用@keyframes来定义动画,并利用animation属性将其应用到元素上。以下是一个简单的示例,展示了如何实现这样的动画效果:HTML:<!DOCTYPE html> <html lang="en"> <head><meta charset=&quo…

使用html画一个音乐播放器的布局

以下是一个简单的音乐播放器布局示例,使用HTML和CSS实现: <!DOCTYPE html> <html> <head><title>音乐播放器</title><style>/* 样式设置 */body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;}.pla…

散热器比较:东海X5 vs 利民AK120SE vs 玄冰500

目录起因测试环境关于测试记录塔体外观AIDA64烤机测试东海X5利民AK120SE玄冰500待机测试东海X5利民AK120SE玄冰500噪音(主管感受)总结 起因 升级电脑,找朋友弄来了淘汰的机箱电源主板啥的,加上自己淘汰的cpu显卡,配成另一台电脑作他用 风扇也放旧电脑用了,因此要买个新风…

3DGStream:3D飞行训练实现照片级逼真自由视点视频的高效流式传输

3DGStream:3D飞行训练实现照片级逼真自由视点视频的高效流式传输 5.13.1 3DGStream:3D飞行训练实现照片级逼真自由视点视频的高效流式传输概述 从多视图视频构建动态场景的逼真自由视点视频(FVV)仍然是一项具有挑战性的工作。尽管当前的神经渲染技术取得了显著进步,但这些…

利用协同嵌入模型超越多任务密集预测

利用协同嵌入模型超越多任务密集预测 5.7.1 利用协同嵌入模型超越多任务密集预测概述 多任务视觉场景理解旨在利用一组相关任务之间的关系,通过将它们嵌入到一个统一的网络中来同时解决这些问题。然而,从任务层面的角度来看,大多数现有方法都引起了两个主要问题:①不同任务…

事件流超分辨率的双边事件挖掘与互补

事件流超分辨率的双边事件挖掘与互补 5.6.1事件流超分辨率的双边事件挖掘与互补概述 事件流超分辨率(ESR)旨在解决事件流中空间分辨率不足的挑战,这对事件相机在复杂场景中的应用具有重要意义。以前的ESR工作通常以混合范式处理积极和消极事件。这种范式限制了他们有效地模拟…

两本书推荐《AI芯片开发核心技术详解》、《智能汽车传感器:原理设计应用》

两本书推荐《AI芯片开发核心技术详解》、《智能汽车传感器:原理设计应用》由清华大学出版社资深编辑赵佳霓老师策划编辑的新书《AI芯片开发核心技术详解》已经出版,京东、淘宝天猫、当当等网上,相应陆陆续续可以购买。该书强力解析AI芯片的核心技术开发,内容翔实、知识点新…

【甲方安全】金融行业+安全架构(三)

第一部分 安全架构第三章 安全规划3.1 规划前的思考3.2 规划框架3.3 制订步骤3.3.1 调研3.3.2 目标、现状和差距3.3.3 制订解决方案3.3.4 定稿3.3.5 上层汇报3.3.6 执行与回顾3.4 注意事项3.5 小结《企业安全建设指南 金融行业安全架构与技术实践》——聂君 李燕 何扬军 编著,…

【甲方安全】金融安全+安全架构(四)

第一部分 安全架构第四章 内控合规管理4.1 概述4.1.1 合规、内控、风险管理的关系4.1.2 目标及领域4.1.3 落地方法4.2 信息科技风险管理4.2.1 原则4.2.2 组织架构和职责4.2.3 管理内容4.2.4 管理手段和流程4.2.5 报告机制4.2.6 信息科技风险监控指标4.3 监督检查4.4 制度管理4.…

【企业安全】安全架构(四)

第一部分 安全架构第四章 内控合规管理4.1 概述4.1.1 合规、内控、风险管理的关系4.1.2 目标及领域4.1.3 落地方法4.2 信息科技风险管理4.2.1 原则4.2.2 组织架构和职责4.2.3 管理内容4.2.4 管理手段和流程4.2.5 报告机制4.2.6 信息科技风险监控指标4.3 监督检查4.4 制度管理4.…

渗透测试-前端加密分析之RSA响应加密

本文是高级前端加解密与验签实战的第7篇文章,本系列文章实验靶场为Yakit里自带的Vulinbox靶场,本文讲述的是绕过请求包和响应包加密来爆破登录界面。本文是高级前端加解密与验签实战的第7篇文章,本系列文章实验靶场为Yakit里自带的Vulinbox靶场,本文讲述的是绕过请求包和响…