相关问题
视频评论区可包含文字、表情包、图片混合排布,希望提供相关demo演示
718浏览 • 1回复 待解决
文字识别demo,对图片中的文字进行ocr提取,提取后进行定位。
342浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
427浏览 • 1回复 待解决
相对布局(RelativeContainer)
328浏览 • 1回复 待解决
示例代码image_Edit,如何用ArkTs给图片添加文字?
983浏览 • 1回复 待解决
关于混合打包 HarmonyApplication?
5145浏览 • 1回复 待解决
png图片使用Image组件加载出现锯齿
382浏览 • 1回复 待解决
如何直接通过函数去编辑图片,比如pixelMap或者说给图片加水印文字这种操作
560浏览 • 1回复 待解决
请问混合应用如何预置?
3491浏览 • 1回复 待解决
我想在图片的左下角上面盖个文字,且文字可以设置大小和背景色
562浏览 • 1回复 待解决
Web组件下网页中图片长按出现蒙层
416浏览 • 1回复 待解决
鸿蒙和reactnative混合开发怎么实现
767浏览 • 1回复 待解决
有人知道如何实现图文混排吗?
339浏览 • 1回复 待解决
如何选择图文混排的实现方案
693浏览 • 1回复 待解决
鸿蒙通用文字识别,无法识别出图中的文字?
5412浏览 • 1回复 待解决
使用ToggleButton切换图片时底部会有黑点出现
5524浏览 • 1回复 待解决
Kafka的偏移量含义是什么?怎么理解这个概念?
808浏览 • 1回复 待解决
跪求各位大神,鸿蒙JAVA开发,如何实现在一张图片上动态绘制文字??
1612浏览 • 1回复 待解决
priviewer为什么只能文字Text标签显示正常,图片Image标签都显示不出来,设置了默认图片的
6676浏览 • 2回复 待解决
DevEco-Studio Stage工程,怎么添加混合Flutter
1013浏览 • 1回复 待解决
lite wearable的开发,CSS支持相对定位和绝对定位嘛?
1767浏览 • 1回复 待解决
鸿蒙 有类似 [Android]使用Paint生成文字图片 吗?如详情中的Android示例
1112浏览 • 1回复 待解决
Ark UI 和Java UI 可以混合开发么?
2708浏览 • 1回复 待解决
首屏启动(两个网络库,网络图片预加载)四五个图片(能否达到秒出现,url)
479浏览 • 1回复 待解决
文字背景颜色渐变显示
754浏览 • 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布局算法中改动行偏移,此时第三页图片与第一页图的应该是相同位置,只有第二页出现偏移。