一行文本该落在哪里详解Combo Breaker的findFlowSlots槽位搜索算法【免费下载链接】combo-breakerText layout for Compose to flow text around arbitrary shapes.项目地址: https://gitcode.com/gh_mirrors/co/combo-breakerCombo Breaker是一款为 Jetpack Compose 打造的文字排版库核心能力是让文本自动环绕任意形状矩形、Path 轮廓甚至位图抠出的曲线进行多栏布局。它的灵魂函数findFlowSlots负责回答一个关键问题当前这一行文字到底能放在哪些矩形区域槽位里下面用通俗的方式拆解这套槽位搜索算法带你快速理解文字绕图排版的底层逻辑。一、问题背景为什么需要槽位普通文本控件的假设很简单每一行都是等宽的长方形从左写到右。但一旦页面里插入了图片、徽标或装饰图形一行文字就被切成了0 个、1 个或多个不等宽的碎片。Combo Breaker 的排版流程把这件事拆成两步几何阶段findFlowSlots根据形状算出这一行的所有可用矩形槽位断行阶段逐槽位调用 ICU LineBreaker 计算能塞进多长的文字。理解第一步就理解了整个库 80% 的核心。二、算法输入与输出主入口在 FlowSlots.ktfindFlowSlots(box, container, flowShapes) → ListRectFbox当前这一行文字的区域一个横条矩形container整个栏的外边界多栏排版时与 box 不同flowShapes所有需要绕开的形状列表每个形状带有Path轮廓和FlowType允许文字从哪侧流过返回值按 left 坐标排序的可用槽位矩形列表空列表 这一行完全放不下文字。三、槽位搜索的 4 个核心步骤步骤 1快速排除无关形状对每个形状先用 quickReject 做 O(1) 检查形状整体在行的上方/下方、或FlowType.None完全不参与排版直接跳过。绝大多数行只需要处理 1~2 个形状这一步省掉大量无用功。步骤 2区间树查找与当前行相交的线段任意Path轮廓在创建 FlowShape 时就被预先处理好了Path.toIntervals() 把曲线展平成一条直线段序列容差 1px每条线段按纵向范围y0~y1插入一棵红黑区间树。于是哪些线段穿过当前这一行变成一次高效的区间重叠查询flowShape.intervals.findOverlaps(行区间, intervals)这正是算法的搜索所在——用空间索引代替逐点扫描复杂轮廓也能保持每行 O(log n) 级别的查找开销。步骤 3裁剪并求出形状的左右极值命中的线段用 clipSegmentLiang-Barsky 裁剪约束到行内后取所有端点的 x 最小/最大值shapeMin 本行内形状最左位置shapeMax 本行内形状最右位置。这两个数就是槽位的天然分界线box.left ~ shapeMin是左侧安全区shapeMax ~ box.right是右侧安全区。步骤 4生成槽位并做交集收缩核心在 addReducedSlots它按形状的FlowType决定左侧、右侧还是双侧生成候选槽位并与已有槽位做水平交集。源码注释里的示意图非常形象XX ________ 右侧流动形状 → 生成左侧槽位 XX | | XX ---------- 加上左侧流动形状后两个槽位被交集收窄 XX __________ ____ XX | | XXX | | XXX XX -------- XXX ---- XXX直觉上每加入一个形状就是往现有空白上打一个洞剩下的连通矩形就是槽位。若某候选槽位不与任何已有槽位重叠则直接新增。四、排除区规则FlowType 如何限制文字流向槽位生成后还要执行 applyFlowShapeExclusions这是文字该绕哪边的执法环节FlowType行为OutsideLeft所有槽位的右边界收缩到hit.min右侧区域禁止放字OutsideRight所有槽位的左边界推后到hit.max左侧区域禁止放字Outside双侧放行槽位落在形状范围内则直接清空FlowType 枚举 还定义了OutsideStart/OutsideEnd随 LTR/RTL 方向自动解析和None。排除区是全局生效的——即使别的形状允许在某个区域放字一个OutsideLeft形状也能把那里变成禁区。如果所有形状都被排除、没有任何线段命中算法退化为最安全的行为整行 box 本身就是一个槽位。五、从槽位到成行结果如何驱动文字排版回到调用方 TextLayout.kt每渲染一行就取y ~ y lineHeight的横条去查槽位然后按 left 从小到大遍历用槽位宽度作为 LineBreaker 的约束宽度重新计算断行若某槽位太窄放不下一行跳过它下一行可能又能利用把文字段画进槽位继续下一个槽位直到整行排满。所以一行文字可以被拆成左窄条 右侧长段这样多段渲染——这就是多栏绕图效果的全部秘密。六、性能设计亮点零分配复用注意findFlowSlots的最后一个参数 FlowSlotFinderState槽位列表、区间列表、临时点全部预分配跨行调用只做clear()复用。因为该函数每行都会被调用一次避免 GC 压力对流畅滚动的长列表至关重要。七、相关文件导航文件职责FlowSlots.kt槽位搜索主算法与排除区IntervalTree.kt红黑区间树线段快速检索FlowShape.kt形状 区间树 包围盒封装Geometry.ktPath 展平为线段并建树Clipping.kt线段裁剪BasicTextFlow.ktFlowType 定义与多栏槽位汇总TextLayout.kt逐行调用 findFlowSlots 完成排版八、一句话总结findFlowSlots的本质是用区间树把曲线轮廓 × 文本行的相交问题降维成左右两个 x 极值再用矩形交集不断在空白上打孔最终交出一排可供断行器使用的安全槽位。理解了打孔求交集这个几何直觉你就掌握了 Combo Breaker 文字环绕布局的核心算法。【免费下载链接】combo-breakerText layout for Compose to flow text around arbitrary shapes.项目地址: https://gitcode.com/gh_mirrors/co/combo-breaker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考