Vue3实现Pixso中的钢笔工具3——梳理函数调用

文章目录

• 一、前言
• 二、按照代码的运行顺序梳理每个函数的运行逻辑
• • • [1. **初始化阶段 (第1-576行)**](#1. 初始化阶段 (第1-576行))
    • • [1.1 宏观配置组件（第1-401行）](#1.1 宏观配置组件（第1-401行）)
      • [1.2 动画系统（第547-576行）](#1.2 动画系统（第547-576行）)
    • [2. **图像扩展阶段 (第578-866行)**](#2. 图像扩展阶段 (第578-866行))
    • • [2.1 扩展相关配置](#2.1 扩展相关配置)
      • [2.2 缩放控制](#2.2 缩放控制)
    • [3. **钢笔工具阶段 (第1000-1500行)**](#3. 钢笔工具阶段 (第1000-1500行))
    • • [3.1 关键状态变量](#3.1 关键状态变量)
      • [3.2 核心函数](#3.2 核心函数)
    • [4. **钢笔工具点击和拖拽阶段 (第1500-2000行)**](#4. 钢笔工具点击和拖拽阶段 (第1500-2000行))
    • • [4.1 点击处理](#4.1 点击处理)
      • [4.2 贝塞尔段处理](#4.2 贝塞尔段处理)
    • [5. **长按处理阶段 (第1570-1750行)**](#5. 长按处理阶段 (第1570-1750行))
    • • [5.1 长按检测](#5.1 长按检测)
      • [5.2 长按创建点](#5.2 长按创建点)
    • [6. **鼠标移动处理 (第1203-1259行)**](#6. 鼠标移动处理 (第1203-1259行))
    • [7. **鼠标释放处理 (第1261-1315行)**](#7. 鼠标释放处理 (第1261-1315行))
    • [8. **画笔笔触渲染 (第1317-1358行)**](#8. 画笔笔触渲染 (第1317-1358行))
    • [9. **剪裁功能 (第1788-1825行)**](#9. 剪裁功能 (第1788-1825行))
    • [10. **其他辅助函数**](#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
  • 启动计时器 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()