如何在Canvas组件中填充文本并高亮指定文本片段？

我之前刚好解决过一模一样的需求——要在Canvas里渲染文本，同时高亮所有匹配搜索短语的部分。核心思路就是把原文本拆分成普通文本段和高亮文本段，然后分别创建Canvas的文本项，给高亮段单独设置样式（比如红色填充）。

下面是完整的可运行示例，包含文本拆分和绘制的完整逻辑：

#!/usr/bin/env wish

# 拆分文本为普通/高亮片段的列表，格式为 {text highlighted_flag}
proc splitTextForHighlight {originalText searchPhrase} {
    set result [list]
    set len [string length $originalText]
    set phraseLen [string length $searchPhrase]
    set pos 0

    while {$pos < $len} {
        # 查找下一个匹配的短语位置
        set matchPos [string first -nocase $searchPhrase $originalText $pos]
        if {$matchPos == -1} {
            # 没有匹配，把剩余文本作为普通段
            lappend result [list [string range $originalText $pos end] 0]
            break
        }
        # 先添加匹配前的普通文本
        if {$matchPos > $pos} {
            lappend result [list [string range $originalText $pos [expr {$matchPos - 1}]] 0]
        }
        # 添加高亮的匹配文本
        lappend result [list [string range $originalText $matchPos [expr {$matchPos + $phraseLen - 1}]] 1]
        # 更新位置到匹配结束后
        set pos [expr {$matchPos + $phraseLen}]
    }
    return $result
}

# 在Canvas上绘制拆分后的文本段，自动处理位置偏移
proc drawHighlightedText {canvas x y text searchPhrase} {
    set segments [splitTextForHighlight $text $searchPhrase]
    set currentX $x
    foreach seg $segments {
        lassign $seg segText highlighted
        if {$segText ne ""} {
            # 创建文本项，高亮段用红色填充
            set item [$canvas create text $currentX $y -anchor nw -text $segText]
            if {$highlighted} {
                $canvas itemconfigure $item -fill red -font {Arial 10 bold}
            }
            # 计算当前文本的宽度，更新下一段的X坐标
            set bbox [$canvas bbox $item]
            set textWidth [expr {[lindex $bbox 2] - [lindex $bbox 0]}]
            set currentX [expr {$currentX + $textWidth}]
        }
    }
}

# 测试代码
canvas .c -width 400 -height 200
pack .c -fill both -expand 1

# 测试文本和搜索短语
set testText "Canvas组件中填充若干文本项，并高亮这些文本中的部分内容（例如高亮Canvas所有文本项中的搜索短语）"
set searchPhrase "Canvas"

# 绘制高亮文本
drawHighlightedText .c 20 20 $testText $searchPhrase

关键细节说明： #

• splitTextForHighlight函数负责把原文本拆分成普通和高亮的片段，支持不区分大小写的匹配（如果需要区分，去掉-nocase参数即可）
• drawHighlightedText函数会逐个绘制每个文本段，通过canvas bbox获取每个文本项的宽度，自动计算下一段的X坐标，保证文本连续不重叠
• 高亮段不仅可以设置红色填充，还可以调整字体（比如加粗），完全根据需求自定义样式

运行这段代码后，你会看到所有的"Canvas"短语都被红色加粗高亮显示，其他文本保持默认样式。

内容的提问来源于stack exchange，提问作者Flopp