文章目录一、前言二、按照代码的运行顺序梳理每个函数的运行逻辑1. **初始化阶段 (第1-576行)**1.1 宏观配置组件第1-401行1.2 动画系统第547-576行2. **图像扩展阶段 (第578-866行)**2.1 扩展相关配置2.2 缩放控制3. **钢笔工具阶段 (第1000-1500行)**3.1 关键状态变量3.2 核心函数4. **钢笔工具点击和拖拽阶段 (第1500-2000行)**4.1 点击处理4.2 贝塞尔段处理5. **长按处理阶段 (第1570-1750行)**5.1 长按检测5.2 长按创建点6. **鼠标移动处理 (第1203-1259行)**7. **鼠标释放处理 (第1261-1315行)**8. **画笔笔触渲染 (第1317-1358行)**9. **剪裁功能 (第1788-1825行)**10. **其他辅助函数**一、前言这篇我们从函数调用顺序的角度梳理一下。二、按照代码的运行顺序梳理每个函数的运行逻辑1.初始化阶段 (第1-576行)1.1 宏观配置组件第1-401行_stageWidth(第432-434行)计算舞台宽度根据是否折折叠历史工具栏决定_extendStageWidth(第36-37行)扩展模式下的舞台宽度计算getAnimateConfig()(第522-544行)获取动画配置根据firstTool判断是扩展模式还是其他模式1.2 动画系统第547-576行startAnimate()()** (第547-568行)启动生成动画设置isGenerating true清空 transformer 节点调用getAnimateConfig()获取配置更新scanCoverConfig和scanLineConfig创建 Konva Animation 并启动stopAnimate()(第569-76行)停止动画重置动画相关配置停止 Konva Animation 并启动stopAnimate()(第569-76行)停止动画重置动画相关配置停止 Konva 动画2.图像扩展阶段 (第578-866行)2.1 扩展相关配置updateRectSize()(第582-596行)更新矩形尺寸显示handleUpdateExtendSizeEnd()(第598-614行)处理扩展矩形拖拽结束2.2 缩放控制handleExtendStageWheel()(第817-867行)扩展模式下的滚轮缩放仅在Ctrl按下时触发缩放限制最大缩放为0.2 ~ 5倍使用stage.position()和stage.scale()调整位置和大小handleDrawStageWheel()(第922-972行)绘制模式下的滚轮缩放逻辑与handleExtendStageWheel()类似同时调用updateCursorInverseScale(newScale)更新光标比例3.钢笔工具阶段 (第1000-1500行)3.1 关键状态变量polygons: 存储所有多边形currentPolygonIndex: 当前正在编辑的多边形索引editingMode: 编辑模式 (idle,creating,halfDone,finalized)currentSegmentIndex: 当前正在编辑的段索引3.2 核心函数startNewPolygon()(第1360-1372行)开始新多边形getAnimateConfig()(第522-544行)获取动画配置handleAnimateStart(): 启动动画handleAnimateStop(): 停止动画4.钢笔工具点击和拖拽阶段 (第1500-2000行)4.1 点击处理onPenStageClick()(第1489-1571-1629行)调用saveState()保存当前状态判断多边形是否已闭合添加新点和段4.2 贝塞尔段处理finalizeBezierSegment()()** (第1530-1569行)调用saveState()设置editingMode finalized将tempP2添加到polygon.points创建贝塞尔段并添加到polygon.segments更新showHandles状态5.长按处理阶段 (第1570-1750行)5.1 长按检测onPenMouseDown()(第1673-1750行)检查isCtrlPressed如果是长按则设置isLongPress true记录长按起点longPressStartPos启动计时器longPressTimer5.2 长按创建点createPointAndStraightSegment()(第1641-1671行)调用saveState()获取当前多边形和段创建新点并添加到points创建新直线段并添加到segments6.鼠标移动处理 (第1203-1259行)onBrushMouseMove()(第1203-1259行)更新光标位置cursorLayerConfig检测是否超过点击阈值clickTolerance累计点到currentBrushStroke.points区分单击和拖拽7.鼠标释放处理 (第1261-1315行)onBrushMouseUp()(第1261-1315行)调用saveState()判断是单击还是拖拽单击则创建点Circle拖拽则完成笔触绘制8.画笔笔触渲染 (第1317-1358行)watch(brushStrokes)(第1318-1358行)监听brushStrokes变化销毁旧的子节点遍历笔触渲染为 Line 或 Circle9.剪裁功能 (第1788-1825行)brushClipFunc(第1788-1825行)获取所有闭合的多边形使用Path2D构造路径调用ctx.clip()进行裁剪10.其他辅助函数cloneFullState()(第1915-1921行)克隆完整状态多边形和笔触restoreState()(第1923-1942行)恢复状态saveState()(第1945-1951行)保存当前状态到撤销栈undo()(第1954-1965行)撤销操作redo()(第1968-1974行)重做操作handleTransformEnd()(第1989-1997行)处理变换结束handleImageDrag()(第1999–?)处理图像拖拽handleHeaderToolChange()(第993-1010行)处理头部工具切换handleSizeCommand()处理尺寸命令handleSingleDownload()处理单张下载handleSingleCollect()处理单张收藏文件的运行逻辑执行顺序初始化配置 → 2. 动画启动 → 3. 图像扩展配置 → 4. 缩放控制 → 5. 钢笔工具点击/拖拽 → 6. 长按检测 → 7. 点添加/删除 → 8. 笔触渲染 → 9. 撤销/重做 → 10. 剪裁处理核心模块动画系统startAnimate()/stopAnimate()缩放控制handleDrawStageWheel()/handleExtendStageWheel()钢笔工具normalAddPointLogic()/createPointAndStraightSegment()/finalizeBezierSegment()长按检测onPenMouseDown()/longPressTimer笔触绘制onBrushMouseDown()/onBrushMouseMove()/onBrushMouseUp()剪裁brushClipFuncPath2D状态管理cloneFullState()/restoreState()/saveState()/undo()/redo()
)
