企业官网建设流程全解析

一、前言

这篇我们从函数调用顺序的角度梳理一下。

二、按照代码的运行顺序梳理每个函数的运行逻辑

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
  • 启动计时器longPressTimer

5.2 长按创建点

• createPointAndStraightSegment()(第1641-1671行)
  • 调用saveState()
  • 获取当前多边形和段
  • 创建新点并添加到points
  • 创建新直线段并添加到segments

6.鼠标移动处理 (第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 或 Circle

9.剪裁功能 (第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()：处理单张收藏

文件的运行逻辑：
执行顺序：

1. 初始化配置 → 2. 动画启动 → 3. 图像扩展配置 → 4. 缩放控制 → 5. 钢笔工具点击/拖拽 → 6. 长按检测 → 7. 点添加/删除 → 8. 笔触渲染 → 9. 撤销/重做 → 10. 剪裁处理

核心模块：

• 动画系统：startAnimate()/stopAnimate()
• 缩放控制：handleDrawStageWheel()/handleExtendStageWheel()
• 钢笔工具：normalAddPointLogic()/createPointAndStraightSegment()/finalizeBezierSegment()
• 长按检测：onPenMouseDown()/longPressTimer
• 笔触绘制：onBrushMouseDown()/onBrushMouseMove()/onBrushMouseUp()
• 剪裁：brushClipFunc+Path2D
• 状态管理：cloneFullState()/restoreState()/saveState()/undo()/redo()