相关问题
HarmonyOS 图文混合问题
638浏览 • 1回复 待解决
HarmonyOS 文字和图片相对布局问题
292浏览 • 1回复 待解决
HarmonyOS 文字排版时ascent - top的间距怎么获取
322浏览 • 1回复 待解决
HarmonyOS 文字展示中包含网络图片混合展示,需要怎展示这个Title
274浏览 • 1回复 待解决
视频评论区可包含文字、表情包、图片混合排布,希望提供相关demo演示
2432浏览 • 1回复 待解决
如何设置子元素相对于自身的额外偏移量?
774浏览 • 1回复 待解决
如何设置子元素相对父元素左上角的偏移量?
639浏览 • 1回复 待解决
HarmonyOS 如何获取子组件相对于父组件的位置/偏移量
468浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙开发中,如何实现组件相对锚点的偏移?
504浏览 • 1回复 待解决
HarmonyOS 元素高度排版异常
183浏览 • 1回复 待解决
#鸿蒙通关秘籍#处理鸿蒙应用中图文混合的复杂沉浸式场景的最佳实践是什么?
823浏览 • 1回复 待解决
HarmonyOS图片出现锯齿
549浏览 • 1回复 待解决
HarmonyOS 图片+文字排列问题
455浏览 • 1回复 待解决
HarmonyOS Flex左右布局时,右边如果有文字,文字则会出现问题
387浏览 • 1回复 待解决
HarmonyOS RichEditor点按文字会出现拍摄输入菜单
764浏览 • 1回复 待解决
如何对文本实现首行缩进?
650浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现HarmonyOS中图片缩放与偏移?
962浏览 • 1回复 待解决
HarmonyOS CustomDialog中布局最底部放入InputText,当键盘被顶起时会出现偏移,并且会出现透明遮挡
509浏览 • 1回复 待解决
支持图文混排组件及解决方案,且图片需要支持点击
896浏览 • 2回复 待解决
HarmonyOS 如何给图片增加文字水印
422浏览 • 1回复 待解决
HarmonyOS 如何对文件进行追加写入
715浏览 • 1回复 待解决
HarmonyOS @ohos.graphics.text模块进行预排版
293浏览 • 1回复 待解决
HarmonyOS Image加载图片不出现
605浏览 • 1回复 待解决
HarmonyOS 自定义tabs点击非文字和图片区域,页面切换,文字图片未高亮
302浏览 • 1回复 待解决
Marquee组件的文字滚动,第一次滚动出现大量空白,如何避免空白出现
997浏览 • 1回复 待解决
一、问题现象
书籍部分章节中带有“注”字图片显示出现偏移,如图所示:第一页显示正常,第二、三页图片往上偏移,如图下图所示:
二、问题分析
文字与图片的混排,算法的入口是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布局算法中改动行偏移,此时第三页图片与第一页图的应该是相同位置,只有第二页出现偏移。