相关问题
HarmonyOS 图文混合问题
284浏览 • 1回复 待解决
视频评论区可包含文字、表情包、图片混合排布,希望提供相关demo演示
2135浏览 • 1回复 待解决
如何设置子元素相对于自身的额外偏移量?
478浏览 • 1回复 待解决
如何设置子元素相对父元素左上角的偏移量?
371浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙开发中,如何实现组件相对锚点的偏移?
98浏览 • 1回复 待解决
#鸿蒙通关秘籍#处理鸿蒙应用中图文混合的复杂沉浸式场景的最佳实践是什么?
139浏览 • 1回复 待解决
HarmonyOS图片出现锯齿
378浏览 • 1回复 待解决
HarmonyOS 图片+文字排列问题
49浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现HarmonyOS中图片缩放与偏移?
156浏览 • 1回复 待解决
Marquee组件的文字滚动,第一次滚动出现大量空白,如何避免空白出现
561浏览 • 1回复 待解决
支持图文混排组件及解决方案,且图片需要支持点击
372浏览 • 2回复 待解决
#鸿蒙通关秘籍#如何实现HarmonyOS NEXT图片和挂件的混合效果?
92浏览 • 1回复 待解决
长按文字出现的复制菜单,在swiper滑走后,依然残留
212浏览 • 1回复 待解决
如何对文本实现首行缩进?
383浏览 • 1回复 待解决
文字识别demo,对图片中的文字进行ocr提取,提取后进行定位。
791浏览 • 1回复 待解决
相对布局(RelativeContainer)
1268浏览 • 1回复 待解决
关于混合打包 HarmonyApplication?
6430浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何通过BlendMode属性实现HarmonyOS NEXT中的图片混合效果?
89浏览 • 0回复 待解决
HarmonyOS相对布局问题
457浏览 • 1回复 待解决
HarmonyOS 有没有相对完整的自定义相机,拍照,保存图片的demo
432浏览 • 1回复 待解决
HarmonyOS Image组件的图片地址不能设置为相对路径吗?
412浏览 • 1回复 待解决
请问混合应用如何预置?
4703浏览 • 1回复 待解决
flutter混合遇到的问题
294浏览 • 1回复 待解决
png图片使用Image组件加载出现锯齿
1781浏览 • 1回复 待解决
#鸿蒙通关秘籍# 鸿蒙系统中图片预览功能实现过程中如何处理图片的大小切换和偏移操作?
107浏览 • 0回复 待解决
一、问题现象
书籍部分章节中带有“注”字图片显示出现偏移,如图所示:第一页显示正常,第二、三页图片往上偏移,如图下图所示:
二、问题分析
文字与图片的混排,算法的入口是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布局算法中改动行偏移,此时第三页图片与第一页图的应该是相同位置,只有第二页出现偏移。