人工智能AI 应用媒体生成本地部署【免费下载链接】Wan2GPA fast AI Video Generator for the GPU Poor. Supports Wan 2.1/2.2, LTX-2, Qwen Image, Hunyuan Video, LTX Video and Flux.项目地址https://gitcode.com/gh_mirrors/wa/Wan2GP点击查看免费下载导读本文围绕 Wan2GP 仓库内嵌图像编辑器IMAGE_EDITOR_OVERVIEW.md的核心组件 Brush Tool 展开系统讲解其在 brush.ts 中的实现如何实现画笔绘制与橡皮擦擦除、如何通过 PIXI.js 多层纹理完成笔画的实时预览与落笔合成、如何提供可自定义的画笔尺寸/颜色/不透明度以及光标与画刷预览。读完本文你将掌握 Brush Tool 的类结构、状态管理、事件处理与性能设计并能据此在 Wan2GP 的图像编辑工作流中定位、调参或二次开发相关画笔能力。Brush Tool 是什么核心职责与文件布局Brush Tool 是图像编辑器中允许用户在画布上绘制draw和擦除erase的核心工具提供可自定义的画笔尺寸、颜色与不透明度。它遵循编辑器定义的Tool接口见 editor.ts通过ImageEditorContext访问 PIXI.js 的 Application、各类容器与工具函数从而与整个编辑器深度集成。相关文件均位于shared/gradio/wangp_image_editor/frontend/shared/brush/目录下文件职责brush.tsBrush Tool 主实现状态、事件、生命周期brush-textures.ts纹理管理笔画预览、擦除遮罩与最终合成brush-cursor.ts自定义光标与画笔预览的显示逻辑brush-utils.ts光标递归设置、安全的销毁与超时清理工具函数types.tsBrushState、Brush、Eraser、ColorTuple等类型定义BrushOptions.svelte画笔设置 UI 控制器ColorPicker.svelte颜色选择组件HS 平面 色相 不透明度滑杆ColorSwatch.svelte预设色板与最近颜色管理ColorField.svelte颜色输入域组件BrushSize.svelte画笔尺寸滑杆1–100从工具层面看编辑器工具栏在 Toolbar.svelte 中定义四种工具image、draw、erase、pan其中draw与erase都由 Brush Tool 承担二者通过不同的 mode 分支处理。类结构与状态管理BrushTool类实现Tool接口核心私有状态如下见 brush.tsprivate state: BrushState { opacity: 1, brush_size: 10, color: #000000, mode: draw }; private brush_size 10; // 画笔专用尺寸 private eraser_size 20; // 橡皮擦专用尺寸 private is_drawing false; private last_x 0; private last_y 0; private scale 1;其中BrushState在 types.ts 中定义opacity不透明度、brush_size当前生效尺寸、color十六进制颜色、modedraw | erase。值得注意的设计是画笔与橡皮擦各自维护独立尺寸brush_size/eraser_size在setup()或set_tool()中根据 mode 将对应尺寸写入state.brush_size因此在 draw 与 erase 之间切换工具不会丢失各自的设置。同文件中还定义了Brush与Eraser接口用于声明画笔的默认行为export interface Eraser { default_size: number | auto; } export type ColorTuple [ColorInput, number]; // [color, opacity] export interface Brush extends Eraser { default_color: ColorInput; colors: (ColorInput | ColorTuple)[]; color_mode: fixed | defaults; }color_mode为fixed时只显示colors中指定的色板为defaults时在色板之外同时提供 ColorPicker 自由取色。Toolbar.svelte会依据这些选项初始化selected_size、selected_color、selected_opacity等默认值见 Toolbar.svelte默认尺寸回退为 25。生命周期setup / set_tool / cleanupBrushTool的setup(context, tool, subtool)负责初始化保存 context、当前工具与子工具依据工具设置 modetool erase则erase否则draw并同步对应尺寸订阅context.scaleSvelte store缩放变化时同步更新光标外观创建BrushCursor与BrushTextures初始化纹理注册事件监听器并把图片容器所有子节点的 CSS cursor 递归设为none见 brush-utils.ts让位给 PIXI 绘制自定义光标。set_tool(tool, subtool)处理工具切换若切离 draw/erase 先提交未完成的笔画commit_pending_changes切换进 draw/erase 时重初始化纹理reinitialize并在 mode 变化时同步尺寸与光标。cleanup()则对称地完成资源释放提交未完成笔画、移除事件监听、销毁BrushTextures与BrushCursor、退订 scale store。渲染管线纹理与容器分工BrushTexturesbrush-textures.ts是绘制/擦除的底层渲染引擎。它在初始化时按图片容器局部尺寸创建两块RenderTexture分辨率取window.devicePixelRatio并组织如下结构stroke_texture临时存放当前这一笔的绘制结果erase_texture擦除模式下保存遮罩区域掩码display_container挂在当前活动图层上的显示容器内含preview_sprite初始alpha 0不可见stroke_container/stroke_graphics承载当前笔画的 Graphics 图元erase_graphics用于擦除模式的遮罩 Graphics。reinitialize()会检测图片容器尺寸是否变化若纹理尺寸与容器不一致则重新初始化从而保证画布 resize 后纹理始终匹配。绘制流程从 Pointer Down 到 CommitBrush Tool 的事件处理基于 PIXI 的事件系统在app.stage上注册pointerdown/pointermove/pointerup/pointerupoutside四个监听见 brush.ts同时在图片容器上监听pointerenter/pointerleave以维护光标悬停状态。绘制/擦除流程分四步Pointer Downon_pointer_down先校验活动图层可见且当前是 draw/erase 工具再preserve_canvas_state()记录新一笔开始把全局坐标通过image_container.toLocal()转为图片本地坐标落点即画一个圆点。Pointer Moveon_pointer_move从上一位置到当前位置调用draw_segment绘制线段并更新last_x/last_y。Pointer Up / Up Outsideon_pointer_up停止绘制并调用commit_stroke()落笔随后通过notify(change)通知外部“画布已变化”。Commit Stroke把临时笔画与活动图层现有内容合成回图层的 draw 纹理详见下文。线段插值与笔画平滑draw_segmentbrush-textures.ts采用“盖章stamp”式绘制先用calculateDistance计算两点距离若小于 0.1 则画单个圆否则按自适应间距spacing max(size / 3, 2)计算步数steps max(ceil(distance / spacing), 2)沿路径等距画圆。间距随画笔尺寸自适应放大、且设最小步数下限从而兼顾快速移动下线条的平滑度与绘制性能——这也是文档所述“点插值”技术的实现来源。新一笔开始时is_new_stroke true会先清空stroke_graphics与stroke_texture随后把图形渲染到stroke_textureclear: false保持累加再更新preview_sprite实现实时预览。绘制与擦除的双路径合成commit_stroke()brush-textures.ts根据current_mode走两条路径绘制模式构造临时容器把活动图层现有draw纹理作为底图叠加上stroke_texturealpha设为笔画不透明度渲染回图层draw纹理clear: true完成一次性合成。擦除模式构造擦除容器以图层内容为底把stroke_texture作为遮罩调用erase_container.setMask({ mask: mask_sprite, inverse: true })——反向遮罩只保留遮罩之外的区域等效于擦除笔画覆盖处再渲染回图层纹理。合成完成后清空笔画图元与纹理重置is_new_stroke true等待下一笔。这种“当前笔先画在独立纹理上、抬手才合成回图层”的机制既保证了拖动过程中不破坏图层原始内容也让整个编辑器可以按“笔”为单位提交变更。擦除过程中的实时预览也很讲究draw_segment在擦除模式会临时生成一张预览纹理先复制当前图层内容再用setMask({ mask: stroke_texture, inverse: false })把白色半透明覆盖层只叠加在将要被擦除的区域上见 brush-textures.ts让用户在抬手前就能看到擦除影响范围。自定义光标与画笔预览BrushCursorbrush-cursor.ts负责两类视觉反馈光标圆环update_cursor_appearance以当前brush_size * scale为半径画空心圆描边draw 模式用当前颜色、erase 模式用白色圆心带 1px 小点便于精确定位update_cursor_position将图片本地坐标换算到ui_container坐标并移动光标容器。画笔预览preview_brush(show)控制在画布中心显示一个实心圆尺寸 brush_size * scale填充色带当前 opacity外圈黑色描边帮助用户在落笔前确认笔触大小与颜色。预览容器同样挂在ui_container上避免被画布内容遮挡。光标可见性由两个条件共同决定is_cursor_over_image指针是否在图片容器边界内通过getBounds()判断见 brush-cursor.ts与is_brush_or_erase_active当前工具是否为 draw/erase。check_cursor_over_image使用clearTimeout取消待处理的检查配合pointerenter/leave事件避免每次 pointermove 都触发冗余的位置计算与渲染——这正是文档所说“光标位置检查使用防抖”的实现。状态调整 API 一览BrushTool对 UI 层暴露了以下方法见 brush.ts方法作用实现要点set_brush_size(size)设置画笔尺寸仅影响 draw 模式写入state.brush_size并刷新光标set_eraser_size(size)设置橡皮擦尺寸仅影响 erase 模式同上set_brush_color(color)设置画笔颜色经 tinycolor 归一化为十六进制字符串set_brush_opacity(opacity)设置不透明度钳制到[0, 1]Math.max(0, Math.min(1, opacity))get_current_size()获取当前模式生效尺寸draw 返回brush_sizeerase 返回eraser_sizepreview_brush(show)显示/隐藏画布中心的画笔预览转发给BrushCursor.preview_brushUI 组件BrushOptions 与配套控件BrushOptions.svelte 是画笔设置的弹层 UI承担以下职责颜色选择color_mode defaults时展开 ColorPickerHS 渐变平面 色相滑杆 不透明度滑杆与 ColorFieldfixed时仅用色板。色板与最近颜色通过 ColorSwatch.svelte 展示预设colors支持[color, opacity]元组同时携带不透明度recent_colors最多保留 5 个最近颜色去重后新增超出即弹出最旧项。尺寸调整show_size时渲染 BrushSize.svelte是一个min1, max100, step1的 range 滑杆。画笔预览联动selected_size/selected_color变化时调用handle_preview()开启预览隐藏时使用 1000ms 防抖延迟关闭避免频繁闪烁。ColorPicker 的颜色算法基于 tinycolor 的 HSV 转换HS 平面取s x/width、v 1 - y/height色相滑杆把 x 坐标映射到 0–360°内部hsva_to_rgba手写实现了 HSV→RGBA 的数学换算见 ColorPicker.svelte。事件处理与清理约定Brush Tool 的事件监听集中在setup_event_listeners/cleanup_event_listeners中成对注册与移除brush.ts。要点包括图片容器需设置为eventMode static、interactiveChildren truestage 同样为static确保 pointer 事件可全局追踪pointerupoutside同样触发提交避免指针拖出画布后笔画悬空所有 bound handler 保存为字段引用cleanup时用stage.off精确移除BrushCursor的 stage/container 监听与cursor_position_check_timeout同样成对清理工具事件系统提供on/off/notify内部用Mapstring, (() void)[]管理回调笔画提交后通过notify(change)通知上层如 Undo/Redo 或导出逻辑。性能设计与维护要点文档与本仓库实现共同确认了以下性能手段详见 brush.ts 中的wangp_request_render与上文各流程点插值快速移动时按自适应间距补圆保证线条平滑纹理管理笔画先画在独立stroke_texture抬手才合成纹理按devicePixelRatio创建、尺寸变化时reinitialize清理时destroy(true)释放 GPU 资源光标位置检查防抖用 timeout 合并频繁的 pointermove 检查按需渲染通过app.wangp_request_render?.()请求渲染而非每事件强制渲染减少无效重绘。维护/二次开发时需遵循的约定清理纹理与容器cleanup_textures会移除并销毁display_container及其子节点事件监听必须成对 add/removedraw 与 erase 模式切换要正确处理reinitialize()与尺寸同步光标绘制必须乘上scale才能与缩放后的画布对齐光标可见性由工具激活状态 指针悬停状态共同决定不可只置其一。结语Brush Tool 是 Wan2GP 图像编辑器中最具代表性的“可插拔工具”实现它通过Tool接口接入编辑器、用双纹理 遮罩完成绘制/擦除的双路径合成、以独立光标与画刷预览提供即时视觉反馈并在事件、纹理与渲染三个层面做了性能取舍。对希望理解或扩展该编辑器的开发者而言建议从 brush.ts 读起配合 brush-textures.ts 与 brush-cursor.ts 即可完整掌握其绘制链路若需深入了解工具系统整体架构可继续阅读 IMAGE_EDITOR_OVERVIEW.md 与 EDITOR.md。赞分享人工智能AI 应用媒体生成本地部署【免费下载链接】Wan2GPA fast AI Video Generator for the GPU Poor. Supports Wan 2.1/2.2, LTX-2, Qwen Image, Hunyuan Video, LTX Video and Flux.项目地址https://gitcode.com/gh_mirrors/wa/Wan2GP点击查看免费下载相关推荐Gradio ImageEditor 画笔工具Brush Tool深度解析绘制/擦除渲染管线、光标预览与自定义 APIGradio ImageEditor 画笔工具Brush Tool深度解析绘制/擦除渲染管线、光标预览与自定义 API 导读 本文以 gradio 仓库中前端后端AI 应用Pot 划词翻译软件完整指南免费跨平台4 个快捷键搞定选词翻译与 OCRPot 划词翻译软件完整指南免费跨平台4 个快捷键搞定选词翻译与 OCR Potpot desktop是一款开源免费的跨平台划词翻译和 OCR 软件基人工智能AI 应用媒体生成本地部署Windows 11终极优化指南如何用Win11Debloat让你的电脑性能飙升Windows 11终极优化指南如何用Win11Debloat让你的电脑性能飙升 还在为Windows 11的臃肿和缓慢而烦恼吗Win11Debloat这款桌面应用CLI上一篇抖音批量下载终极神器3步搞定无水印视频告别手动烦恼下一篇CTF流量分析神器CTF-NetA终极使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
