前言在嵌入式开发、硬件设计、或者是单片机图像配置领域经常需要制作简单的位图素材比如 OLED/LCD 屏幕界面、UI 图标、菜单背景等。Photoshop 固然强大但对于“仅需要按像素精确绘制简单几何”的场景来说未免有些杀鸡用牛刀。本文分享一个用 Python Tkinter 构建的位图生成工具适合嵌入式工程师使用所有参数都是像素级、支持参考图测量抄图神器、支持工程保存、并优化了界面布局让大屏绘图区域最大化且打包成绿色单 exe 即可使用。目录设计目标与UI原则整体布局设计大屏绘图优先参考图分析区抄图工具画布预览与缩放实现元素管理与撤销机制嵌入友好的设计细节完整项目代码与打包说明一、设计目标与UI原则嵌入式场景下的设计目标像素绝对控制— 所有坐标、尺寸输入都以像素为单位所见即所得快速测量抄图— 从已有设计/图片测量像素距离和位置大屏绘图优先— 尽可能让预览区占据界面的主要位置轻量级、无依赖— 无需安装 Photoshop/GIMP单个 exe 运行界面设计原则分区明确左侧预览与分析区右侧参数控制区操作分层常用绘图功能直线、矩形放标签页靠前位置状态可见实时坐标、画布尺寸、当前状态清晰可见—二、整体布局设计布局结构我们将界面分为左右两个主区域左侧 (70%)右侧 (30%)上画布预览区绘图主要区域标签页控制区下参考图分析区测量工具元素列表底部操作按钮布局核心思想绘图与测量区优先占据大屏控制区在右侧。代码片段分区实现# bitmap_gui.py 节选def_build_ui(self):# 整体水平分割maintk.PanedWindow(self.root,orienttk.HORIZONTAL,sashwidth5,bg#E8ECF0)main.pack(filltk.BOTH,expandTrue,padx6,pady6)# 左侧面板画布 参考图left_paneltk.PanedWindow(main,orienttk.VERTICAL,sashwidth5,bg#E8ECF0)self._build_preview_panel(left_panel)self._build_ref_panel(left_panel)main.add(left_panel,minsize750)# 右侧面板控制 列表rightttk.Frame(main)self._build_side_panel(right)main.add(right,minsize370)使用PanedWindow可以让用户拖拽调整画布与参考图的比例。三、画布预览与缩放预览区核心功能实时显示当前绘制结果支持鼠标滚轮缩放、适应窗口实时显示鼠标位置像素坐标Canvas 滚动支持处理大图实现自适应缩放与滚动defrefresh_preview(self,keep_scrollFalse):刷新预览画布imgself.bmp.get_image()scaleself._get_scale()new_wmax(1,int(img.width*scale))new_hmax(1,int(img.height*scale))displayimgifscale1.0elseimg.resize((new_w,new_h),Image.NEAREST)# 保持 scroll 位置sx,sy0,0ifkeep_scroll:try:sx,syself.preview_canvas.xview()[0],self.preview_canvas.yview()[0]except:passself._tk_imageImageTk.PhotoImage(display)self.preview_canvas.delete(all)self.preview_canvas.config(scrollregion(0,0,new_w,new_h))self.preview_canvas.create_image(0,0,anchortk.NW,imageself._tk_image)ifkeep_scroll:self.preview_canvas.xview_moveto(sx)self.preview_canvas.yview_moveto(sy)实时坐标显示在预览区鼠标移动时立即显示当前位置的像素坐标这对嵌入式绘图至关重要def_on_preview_motion(self,event):scaleself._get_scale()xint(self.preview_canvas.canvasx(event.x)/scale)yint(self.preview_canvas.canvasy(event.y)/scale)self.coord_var.set(f坐标: ({x},{y}))四、参考图分析区抄图功能嵌入式开发中最常用的功能从现有图片测量像素尺寸。功能说明加载参考图任意图片导入画线测量测量两点间像素距离、角度、ΔX、ΔY取点同步将点击位置同步到绘图参数中取色功能拾取像素RGB值测量结果实时展示设计了黄色背景的测量结果区一目了然# 测量结果展示tk.Label(content,textvariableself.ref_result_text,bg#FFFDE7,fg#666,font(Microsoft YaHei,9),justifytk.LEFT,anchortk.W).pack(sidetk.LEFT,filltk.X,expandTrue,padx4)五、元素管理与撤销机制可撤销的绘图流程每次绘图操作添加到元素列表画布清理后按顺序重放所有元素时间倒流支持删除单个或全部元素元素数据结构设计# 每个绘图元素都是可序列化的 dict{type:line_angle,# 类型desc:直线(角度)...,# UI描述params:{# 回放参数x:100,y:100,length:300,angle:0,color:#FF0000,width:2}}重放元素def_replay_element(self,e):t,pe[type],e[params]iftline_angle:self.bmp.draw_line_angle(p[x],p[y],p[length],p[angle],colorp[color],widthp[width])eliftrect:self.bmp.draw_rect(p[x],p[y],p[w],p[h],fillp.get(fill),outlinep[outline],widthp[width])# ...其他图形六、嵌入友好的设计细节1. 深色标题栏 浅色内容区分绘图区与控件区减少视觉干扰使用SOLID边框提高辨识度headertk.Frame(frame,bg#3498DB,height36)header.pack(filltk.X)2. 按钮扁平化设计去掉不必要的阴影类似现代嵌入式UI风格3. 工程保存与加载绘图过程支持保存方便下次继续绘制defsave_project(self):fpfiledialog.asksaveasfilename(defaultextension.json,filetypes[(位图工程,*.json)])ifnotfp:returndata{canvas:{width:self.canvas_w.get(),height:self.canvas_h.get(),bg_color:self.bg_color.get()},elements:self.elements}withopen(fp,w,encodingutf-8)asf:json.dump(data,f,ensure_asciiFalse,indent2)七、项目代码与打包核心依赖Python 3.8Pillow图像处理Tkinter内置打包成单 exe使用 PyInstaller# build_exe.specaAnalysis([bitmap_gui.py],datas[(bitmap_tool.py,.),(收款码图片.jpg,.)],hiddenimports[PIL,PIL.Image,PIL.ImageTk],)exeEXE(pyz,a.scripts,a.binaries,a.datas,[],name位图生成工具,consoleFalse,# 无控制台窗口)打包命令python-m PyInstaller build_exe.spec--clean总结这个位图生成工具的设计重点在于大屏优先的布局让绘图与测量区域占据主要视野像素级控制坐标输入与显示完全精确适合嵌入式使用抄图辅助功能快速从已有设计提取尺寸绿色单 exe方便在不同机器上使用希望对你的嵌入式设计工作有所帮助添加链接描述生成图像预览【某界面图像】文章作者嵌入式开发爱好者联系方式zhang1270126.com