SerenityOS Pixel Paint 图像编辑器完全指南界面、工具、图层与滤镜深度解析【免费下载链接】serenityThe Serenity Operating System 项目地址: https://gitcode.com/GitHub_Trending/se/serenityPixel Paint 是 SerenityOS 操作系统内置的一款功能丰富的位图图像编辑器灵感源自经典 Microsoft Paint同时融入了标签页、图层、蒙版、滤镜与颜色示波器等进阶能力。本文以系统手册页 Base/usr/share/man/man1/Applications/PixelPaint.md 为骨架结合 Userland/Applications/PixelPaint 目录下的真实源码实现完整讲解其启动方式、界面布局、全部绘图工具、图层与蒙版机制、颜色调整以及滤镜原理帮助你快速上手并理解底层实现。概览与启动方式这是什么Pixel Paint 是一个支持多文档标签页、图层与蒙版的位图raster图像编辑器。它既是像素艺术创作工具也具备曲线文本、选区、渐变、滤镜等较专业的编辑能力。文档可以保存为 Pixel Paint 专有工程文件.pp完整保留图层与图像信息也可以导出为 BMP、PNG 或 QOIQuite Okay Image Format三种常见格式。命令行用法在 SerenityOS 终端中通过以下任意一种方式启动$ PixelPaint [file] $ pp不带参数启动时程序会自动创建一个默认空白图像传入file参数时会直接打开指定图片文件进入编辑。从源码看入口位于 Userland/Applications/PixelPaint/main.cpp它使用Core::ArgsParser注册了一个可选的位置参数positional argumentpath描述为 Image file to open即命令行的第一个参数就是要编辑的图片路径args_parser.add_positional_argument(image_file, Image file to open, path, Core::ArgsParser::Required::No); args_parser.parse(arguments);随后主窗口标题被设置为Pixel Paint并默认恢复为 800×520 的窗口尺寸关闭时自动保存窗口位置与大小键名PixelPaint/Window。若用户传入了文件路径程序会通过文件系统访问门户FileSystemAccessClient请求只读权限并打开该图片一旦打开失败或未传参则回退创建默认空白图像。$ PixelPaint /home/anon/Documents/cat.jpg上述示例会直接打开/home/anon/Documents/cat.jpg进行编辑。文件格式与底层序列化.pp工程文件保存图层、蒙版、名称、位置、透明度等全部编辑信息适合继续编辑。从 Userland/Applications/PixelPaint/ProjectLoader.cpp 的加载逻辑看文件内容首先尝试按 JSON 解析解析失败才按普通位图raw image处理——此时会根据文件名猜测 MIME 类型再交给图像解码服务进程解码成位图并放入一个名为 Background 的图层。.pp的 JSON 结构由 Userland/Applications/PixelPaint/Image.cpp 中的serialize_as_json()写入。根对象包含width、height与layers数组每个图层对象包含width、height、name、locationx、locationy、opacity_percent、visible、selected以及用Base64 编码的 PNG 位图数据bitmap若存在蒙版还会附带mask字段。值得留意的是文档中还提到.pp文件会保存标尺上的参考线guides加载时通过json.get_array(guidessv)读取。导出格式Image::export_bmp_to_file()、export_png_to_file()、export_qoi_to_file()分别调用 LibGfx 的BMPWriter、PNGWriter、QOIWriter完成编码。BMP/PNG 导出时可选择是否保留 Alpha 通道决定使用BGRA8888还是BGRx8888位图格式。尺寸上限Image::create_with_size()会校验图像尺寸任何一边超过 16384 像素都会拒绝创建。用户界面总览Pixel Paint 的界面遵循常见图像编辑器的习惯大部分功能都可通过菜单栏访问并且所有菜单动作都可以用CtrlShiftA打开动作搜索框来查找。整体布局自左至右、自上而下为顶部菜单栏 工具栏新建、打开、保存、缩放预设、色阶窗口等画布上方标签页栏多文档画布四周横向与纵向标尺画布左侧工具面板Tool Panel画布右侧编辑面板Layers、Layer properties、Tool properties 等画布下方颜色面板Color Panel与状态栏Status Bar。窗口整体结构由 GML 布局文件 Userland/Applications/PixelPaint/PixelPaintWindow.gml 定义并在 Userland/Applications/PixelPaint/MainWidget.cpp 中通过load_from_gml()加载各子组件toolbox、statusbar、tab_widget、palette_widget、histogram_widget、vectorscope_widget、layer_list_widget、layer_properties_widget、tool_properties_widget。工具栏工具栏集中了常用动作新建、打开、保存文件以及三个实用的缩放预设——Fit to width适应宽度、Fit to height适应高度、Fit entire image适应整幅图像。色阶Levels窗口工具栏最后一个图标会打开色阶调整窗口。色阶控制图像中的曝光亮度Brightness亮度整体提亮或压暗所有颜色。Contrast对比度增大或减小明暗区域之间的差异。Gamma伽马重新分配光线强度可使数字图像更接近人眼感知细节的方式尤其是在较暗区域。从实现上看Userland/Applications/PixelPaint/LevelsDialog.cpp 中这三个参数分别对应三个GUI::ValueSlider滑条任一滑条变化都会实时调用generate_new_image()对当前活动图层逐像素重算颜色并在对话框标题栏下方提示当前作用的图层名Working on layer: ...。色阶对话框会先克隆一份参考位图因此可实时预览点击 Apply 后通过did_complete_action(Levels)进入撤销栈。底层颜色校正采用预计算查找表generate_precomputed_color_correction()先把亮度增量加到每个 0–255 的颜色分量上并夹取边界再应用以 100 为基准的伽马指数1 / (value / 100.0)最后套用对比度公式259 * (contrast 255) / (255 * (259 - contrast))围绕 128 拉伸。这样一次遍历就能完成全部像素调整。如果当前图层正在编辑蒙版MaskType::EditingMask调整效果只会作用于蒙版区域。主工作区标签页栏位于画布上方可同时打开多个文档通过点击标签切换中键点击标签可直接关闭文档。标尺与参考线画布四周有垂直和水平标尺。当 Guide参考线工具激活时从标尺上拖拽即可创建参考线。画布位于中央可以在此绘制、创建形状、书写文字、编辑图像。左键用主色绘制右键用辅色绘制Ctrl /Ctrl -或鼠标滚轮缩放按住中键拖动画布平移。放大到足够程度后会显示像素网格便于像素艺术等精细操作。颜色面板Color Panel画布下方是颜色面板。左侧是颜色选择器Color Picker内圈是主色primary color外圈是辅色secondary color点击任一圆环即可弹出取色器修改对应 Userland/Applications/PixelPaint/PaletteWidget.cpp 中的SelectedColorWidget。颜色选择器右侧是默认颜色调色板左键点击某个色块 → 设为主色右键点击 → 设为辅色按X交换主色与辅色按D重置为默认的黑/白。在Edit菜单中可以保存/加载调色板文件扩展名为.palette。这些是纯文本文件内容为十六进制颜色码Hex Color Codes每行一个颜色顺序从左上角颜色开始逐行向右排列。状态栏Status Bar颜色面板下方是状态栏。鼠标悬停在画布上时状态栏显示光标所在的像素坐标悬停在界面其他控件上时则显示该按钮的功能描述。这一行为由 main.cpp 中注册的on_action_enter/on_action_leave回调实现——进入某个GUI::Action时把其status_tip()显示在状态栏上离开时清除。工具面板Tool Panel主工作区左侧是工具面板。选中某个工具后按[/]调整该工具的主选项例如画笔工具的Size尺寸按住Shift再按[/]调整次选项例如画笔工具的Hardness硬度。Hardness硬度指绘制元素与背景之间过渡的锐利程度影响边缘清晰度。硬度越高边缘越锐利而**羽化边缘feathered edges**具有柔和的过渡强度逐渐衰减形成平滑混叠的外观。所有工具都继承自 Userland/Applications/PixelPaint/Tools/Tool.h 中的Tool基类它把鼠标事件封装为MouseEvent区分 DoubleClick/MouseDown/MouseMove/MouseUp 四种动作并提供on_mousedown、on_mousemove、on_mouseup、on_keydown等虚函数接口以及constrain_line_angle()用于实现 22.5° 角度约束。工具属性面板由每个工具各自的get_properties_widget()构建。移动工具M移动图层。既可以在图层面板中选择图层也可以在画布上直接点选。当顶层图层没有铺满整个画布时可以直接在画布上选中其下方的图层。铅笔工具N使用方形笔刷绘制默认 1px、100% 硬度。增大厚度会得到更大的 100% 硬度方形笔触非常适合像素艺术。要画直线先落一笔按住Shift再点击目标位置即可。源码 Userland/Applications/PixelPaint/Tools/PenTool.cpp 中构造时set_size(1)属性面板的 Thickness 滑条范围为1–20px底层通过GUI::Painter::draw_line()落笔。画笔工具P使用圆形笔刷绘制默认 20px 且带羽化边缘。尺寸与硬度均可调整适合追求自然笔触的绘画。同样支持落笔 Shift点击绘制直线。油漆桶工具ShiftB填充一个闭合区域若区域未闭合则填充整个图层。喷雾工具ShiftS通过在圆形笔刷范围内随机散布像素产生质感效果。可调整喷雾的尺寸与密度像素的紧密程度适合制作渐隐效果。取色工具O将拾取的颜色设为主色。默认只采样当前活动图层除非勾选Sample all layers采样所有图层选项。任何时候按住Alt都可临时切换到取色工具。橡皮擦工具ShiftE擦除当前图层上的像素。有两种模式Pencil铅笔方形笔刷100% 硬度Brush画笔圆形笔刷硬度可调。若启用Use secondary color使用辅色则擦除时涂上辅色而不是让该区域变透明。直线工具CtrlShiftL创建一条矢量直线松开鼠标时栅格化rasterize转换为像素。绘制时按住Shift可将角度约束为 22.5° 的整数倍。矩形工具CtrlShiftR绘制矢量矩形松开鼠标时栅格化。按住Shift绘制正方形。选项包括Outline描边无填充的矩形可调整线条粗细Fill填充用主色填充Gradient渐变用主色到辅色的渐变填充方向自左向右Rounded圆角绘制带圆角的矢量正方形松开鼠标时栅格化。圆角半径须在绘制前调整之后不可修改Anti-alias抗锯齿平滑锯齿边缘呈现更精致的外观Aspect ratio宽高比设定宽高比例如1x1表示正方形。椭圆工具CtrlShiftE绘制矢量椭圆松开鼠标时栅格化按住Shift绘制正圆。拥有与矩形工具类似的大部分选项。文本工具CtrlShiftT点击放置文本并开始输入ShiftEnter换行Esc取消文本默认使用主色改色会同步改变已输入文字颜色在工具属性中修改字体与字号编辑过程中可调整文本位置按Enter或点击文本外部后文本会被栅格化此后不可再编辑。缩放工具Z左键放大、右键缩小。可在工具属性中调整缩放步长。选区工具CtrlA全选Esc清除选区Edit菜单中可以反选Invert selection。选区有四种模式Set设置建立初始选区Add添加每次新选区都并入现有选区包括合并相交区域Subtract减去从现有选区中移除区域Intersect相交保留与其他选区的重叠部分。矩形选区工具R选择矩形区域。按住Ctrl可从中心向四周等比例扩展选区。魔棒选区工具W基于颜色选择区域。可调整**阈值threshold**控制选择的精确程度。多边形选区工具ShiftP点击依次绘制多边形顶点按住Shift约束 22.5° 增量闭合后自动转为选区双击可快速闭合。可调整Feathering羽化在此语境下会带来圆角效果。套索选区工具L徒手绘制形状闭合后自动转为选区松开鼠标会自动闭合形状。参考线工具G从画布四周的标尺拖拽即可创建参考线。按住Shift拖拽可按10px增量吸附步长可在工具属性中调整。已创建的参考线可以移动右键点击参考线可删除或打开Set Offset菜单修改其方向与偏移量距上/左标尺的像素距离。参考线对维持对齐非常有用且导出时不会显示。与参考线相关的编辑对话框位于 Userland/Applications/PixelPaint/EditGuideDialog.cpp。克隆工具C按住Alt点击指定要克隆的源区域以绿色圆圈标示然后在目标位置涂抹即可复制该区域像素。目前只能从同一图层内克隆。笔刷的尺寸与硬度可调。渐变工具CtrlG点击并拖拽创建渐变默认从主色过渡到透明可在工具属性中改为从主色过渡到辅色颜色在颜色面板中调整。通过拖拽中间手柄移动渐变位置用外圈手柄调整大小与方向按住Shift约束为水平或垂直方向按Enter栅格化Esc取消。编辑面板Editor Panels主工作区右侧的编辑面板用于图层配置、工具调整和颜色信息查看双击面板名称标签或使用切换按钮可最小化面板拖拽名称标签可重新排列面板将面板拖出或点击分离图标可变成可调整大小的独立窗口拖出Editor Panels标签或点击其分离图标可将全部面板合并到一个独立窗口关闭独立窗口即可重新停靠回面板。默认面板包括Layers图层添加、删除、重排或操作图层右键图层或通过Layers菜单调整。Masks蒙版控制图层可见性的叠加层——黑色隐藏、白色显示、灰色提供不同程度的透明。蒙版是非破坏性的可随时撤销而不永久改变原图。回到蒙版菜单可执行delete彻底移除蒙版、apply将蒙版与底层图层合并、invert反转黑白内容、clear保留一个空蒙版。Layer properties图层属性重命名、显示/隐藏图层、调整图层不透明度。Tool properties工具属性配置当前选中工具的设置。从源码结构看这三个面板分别对应 LayerListWidget.cpp、LayerPropertiesWidget.cpp 与 ToolPropertiesWidget.cpp。图层的不透明度、可见性、位置等信息由 Layer.cpp 维护并在 Image.cpp 的paint_into()中按图层顺序、以各自不透明度混合绘制Image.cpp 还实现了merge_visible_layers()合并可见图层、flatten_all_layers()拼合全部图层等图层栈操作。颜色可视化Color Visualizations在View → Scopes菜单中可启用两个可视化颜色的编辑面板Histogram直方图展示图像色调范围的图表最左为最暗、最右为最亮。光标悬停画布时黄色竖线标示光标下像素在图表中的位置。对应实现为 Userland/Applications/PixelPaint/HistogramWidget.cpp。Vectorscope矢量示波器对应色轮标记指示图像的色相Hue与饱和度Saturation程度——标记距中心越远饱和度越高。红黄之间向上的斜线是肤色线Skin Tone Line标示所有肤色的理想位置。光标悬停画布时圆圈高亮标示对应颜色在示波器上的位置。对应实现为 Userland/Applications/PixelPaint/VectorscopeWidget.cpp。滤镜FiltersFilter菜单中的Filter Gallery滤镜画廊可对整个图像默认或当前选区应用颜色调整或特效。它由 Userland/Applications/PixelPaint/FilterGallery.cpp 实现滤镜按分类组织在树状模型中见 FilterTreeModel.cpp并支持实时预览FilterPreviewWidget.cpp。Artistic艺术Bloom泛光为明亮区域添加光晕。可调整产生光晕的亮度阈值与光晕半径。Edge Detection边缘检测边缘检测突出视觉元素之间的过渡强调物体边界。有两种实现方法Laplacian Cardinal拉普拉斯-正交强调水平与垂直边缘突出沿这些正交方向强度变化显著的区域Laplacian Diagonal拉普拉斯-对角强调并突出图像中的对角边缘。对应源码为 Userland/Applications/PixelPaint/Filters/LaplaceCardinal.cpp 与 LaplaceDiagonal.cpp。Blur Sharpen模糊与锐化模糊有多种实现方式结果各异区别在于权重分配——赋予像素的值决定了它对最终图像影响的大小。Gaussian 与 Box 模糊都提供3x3和5x5两种选项表示模糊计算所用的网格大小简单来说网格越大模糊越平滑。Fast Box Blur快速方框模糊通过在方形区域内对像素颜色取平均实现快速模糊使外观更平滑。可调整模糊半径启用Asymmetric Radii非对称半径可分别沿水平、垂直或两个轴调整模糊量启用Use Direction and Magnitude使用方向与强度可调整模糊角度与强度Approximate Gaussian Blur近似高斯模糊通过多次加权应用方框模糊获得更平滑的效果。Gaussian Blur高斯模糊基于钟形bell-shaped分布逐步混合像素颜色来平滑图像呈现柔和外观。对应源码为 GaussBlur3.cpp 与 GaussBlur5.cpp。Box Blur方框模糊比 Fast Box Blur 更耗时因为要考虑更大范围的邻近像素从而得到更彻底、更精细的平滑。对应源码为 BoxBlur3.cpp 与 BoxBlur5.cpp。Sharpen锐化通过增强边缘处的对比度提升图像清晰度与细节使边缘更分明。对应 Sharpen.cpp。Median Filter中值滤波用邻近像素的中值替换每个像素的值在保留边缘与细节的同时有效降噪适合去除图像中的灰尘或坏点。对应 Median.cpp。Color颜色Hue/Saturation色相/饱和度通过修改颜色类型、强度以及混入的黑/白量来精确调整图像颜色Hue色相颜色类型按色轮度数计从 0%红色开始Saturation饱和度颜色纯度从 0%黑色到 100%纯色Lightness明度混入的黑/白量从 0%黑色到 100%白色。对应源码为 Userland/Applications/PixelPaint/Filters/HueAndSaturation.cpp。Grayscale灰度移除颜色信息将图像转换为黑白按原色强度生成灰色调。对应 Grayscale.cpp。Invert反相反转图像颜色暗处变亮、亮处变暗。对应 Invert.cpp。Sepia棕褐色将图像转为黑白并叠加温暖的褐色调营造类似老照片的怀旧感。强度可调。对应 Sepia.cpp。Generic 5x5 Convolution通用 5×5 卷积Filter菜单中的最后一个选项使用一个 5×5 数字网格根据邻近像素重新计算每个像素的外观。Normalize归一化保持亮度一致维持均衡、标准化的外观Wrap环绕让计算在图像边缘处考虑另一侧的像素以获得更平滑的效果不启用环绕时卷积在图像边界可能产生伪影或不规则现象。命令行参数汇总参数说明是否必需file要编辑的图像文件路径否缺省时创建默认空白图像结语Pixel Paint 在经典画图程序的基础上叠加了现代位图编辑器必需的图层、蒙版、选区、渐变、滤镜与颜色分析工具同时通过.pp工程文件完整保留编辑状态。无论是做像素艺术、简单示意图还是照片级调整都可以从命令行用PixelPaint 文件或快捷命令pp一键进入。若想深入理解实现细节可直接阅读 Userland/Applications/PixelPaint 下的源码工具体系以 Tools/Tool.h 为基类逐层扩展图像与图层数据模型在 Image.cpp 与 Layer.cpp 中实现滤镜则集中在 Filters 目录下每个滤镜都是一个可独立阅读的类。【免费下载链接】serenityThe Serenity Operating System 项目地址: https://gitcode.com/GitHub_Trending/se/serenity创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考