在本篇技术博客中，我将详细介绍如何使用Python、Playwright和Flet框架开发一个汉字笔画提取工具。从初始化项目到构建用户界面，再到实现笔画提取和图片处理，每一个步骤都将逐一展开，旨在帮助初学者理解和运用这些技术。
在日常的软件开发中，特别是在涉及文字处理和语言学习的应用中，经常需要处理和展示汉字的笔画顺序。这个项目的初衷就是为了开发一个可以输入汉字并展示其笔画图像的工具，使用Python语言结合Playwright来实现这一功能。下面是我如何从零开始构建这个应用的过程。
项目背景与目标
作为一个热衷于技术和语言学习的开发者，我发现市面上虽然有很多汉字学习的应用，但很少有工具可以动态地展示汉字的笔画顺序。因此，我决定自己动手实现一个。这个工具的核心功能包括：
- 输入汉字并提取笔画。
- 显示汉字笔画的顺序和详细图像。
- 提供用户界面以便操作和展示结果。
技术栈选择
- Python：由于其简单和丰富的库支持，我选择Python作为后端语言。
- Playwright：用于在浏览器中自动化获取汉字的笔画图像。
- Flet：一个轻量级的Python框架，用于构建跨平台的应用。
- PIL：Python图像库，用于图像处理。
开发过程
初始化日志记录器
日志是任何应用程序的重要组成部分，它帮助我们了解程序运行的状态。我使用以下代码来设置日志记录：
import logging
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
用户界面设计
使用Flet框架，我设计了一个简单而直观的用户界面。它包括一个文本输入框、一个排序下拉菜单和一个用于展示笔画的滚动视图。用户界面的布局如下所示：
def build(self):
layout = [
flet.Row(controls=[Text("欢迎使用汉字输出笔划工具!", size=30, color=flet.colors.LIGHT_BLUE_500)]),
flet.Row(controls=[self.chinese_word_input]),
flet.Row(controls=[self.word_sort_dropdown, flet.ElevatedButton("汉字笔划", on_click=self.generate_bi_hua)]),
flet.Row(controls=[self.bihua_scroll_viewer])
]
return flet.Column(controls=layout)
汉字笔画提取
核心功能是提取汉字的笔画，并使用Playwright在无头浏览器中自动截图。我通过以下函数实现：
def generate_single_bi_hua(self, page, word):
url = f"https://hanyu.baidu.com/s?wd={word}&ptype=zici"
page.goto(url)
element_selector = '.word-stroke-wrap'
element = page.locator(element_selector)
bounding_box = element.bounding_box()
if bounding_box:
page.screenshot(path=f'./images/{word}.png', clip={'x': bounding_box['x'], 'y': bounding_box['y'], 'width': bounding_box['width'], 'height': bounding_box['height']})
遇到的挑战
在开发过程中，我遇到了几个挑战，例如浏览器自动化脚本的稳定性和图片合成的效率问题。通过调整代码和优化逻辑，最终得到了满意的结果。
结语
通过这个项目，我不仅提高了自己的编程技能，还成功解决了一个实际问题。希望这篇文章能帮助到有类似需求的读者。如果你对汉字的笔画提取有兴趣，可以尝试运行和修改这个代码，以更好地适应你的需求。