图文混合排版,图片相对文字出现偏移

图文混合排版,图片相对文字出现偏移

HarmonyOS
2024-06-11 20:46:04
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
honda1999

一、问题现象

书籍部分章节中带有“注”字图片显示出现偏移,如图所示:第一页显示正常,第二、三页图片往上偏移,如图下图所示:

二、问题分析

文字与图片的混排,算法的入口是InlineLayoutAlgorithm::Measure与InlineLayoutAlgorithm::Layout;简易流程如下:

①、根据解析之后的样式创建ParagraphStyle;

②、以ParagraphStyle创建Paragraph;

③、调用Paragraph的layout进行初排版;

④、预设图文节点的内容大小以及高度数据;

⑤、Inline排版算法外层触发InlineLayoutAlgorithm::Layout流程;

⑥、对于子节点,通过InlineLayoutAlgorithm::SetChildOffset方法设置每个子节点的初始相对位移;

⑦、进入分栏计算,按照行偏移给每个文字行进行偏移计算;

⑧、对于图文混排的行中的图片,通过获取③中的位置,计算真正的分栏位置;

以上流程中,基于日志分析,③中打印不同行的偏移,都是逐渐累积计算,每段累计分析暂未发现异常;

③中的初排版完成与⑥中获取的子节点偏移保持一致;

往后初始分析⑧中获取的行的位置与⑦中也保持一致;

通过查看paragraph_txt.cc中的layout方法,以及PaintInColumn设置各个行的偏移,

经过梳理得到下面这张图

流程③④计算对应图中的line_height与行的baseline;

解释一下:针对文字的排版,通常会有个baseline,上下有最大最小浮动距离,即图中的ascent与descent,这些大小与文字的大小由①中的ParagraphStyle决定。

继续分析代码发现分栏的流程⑦在计算各个行的linesoffset都是正确的,但是在⑧中对最后的文字进行计算分栏偏移时,直接使用lineoffset,但实际上图片相对linesOffset是有偏移存在;

就此找到问题所在,在⑧中计算分栏偏移时候,带上行内的偏移即可;

三、验证与扩展分析

按照问题分析中的想法,理论上只要进入InlineLayoutAlgorithm::Layout之后,不触发行位移变化,那图文的混排就能保证分栏之后与分栏前是一致的,于是将第二页增加部分文字,让最后一块图文混排的块保持在同一页,这样就不会触发Inline布局算法中改动行偏移,此时第三页图片与第一页图的应该是相同位置,只有第二页出现偏移。

分享
微博
QQ
微信
回复
2024-06-12 17:51:30
相关问题
Text 组件如何渲染图文动态混排
462浏览 • 1回复 待解决
相对布局(RelativeContainer)
406浏览 • 1回复 待解决
png图片使用Image组件加载出现锯齿
545浏览 • 1回复 待解决
关于混合打包 HarmonyApplication?
5255浏览 • 1回复 待解决
请问混合应用如何预置?
3603浏览 • 1回复 待解决
有人知道如何实现图文混排吗?
377浏览 • 1回复 待解决
如何选择图文混排的实现方案
814浏览 • 1回复 待解决
鸿蒙和reactnative混合开发怎么实现
903浏览 • 1回复 待解决
Web组件下网页中图片长按出现蒙层
459浏览 • 1回复 待解决
文字背景颜色渐变显示
915浏览 • 1回复 待解决
文字动画效果如何实现
802浏览 • 0回复 待解决