学习笔记

主题

2026-07-31

79-线段编辑器：架构思路与任务拆分 ​

你好，我是徐昊。从今天开始，我们就来使用TDD的方式实现一个线段编辑器（Line Editor）。

在之前的三个项目中，我们展示了如何使用TDD的方式来实现功能以及框架。接下来，我们要通过一个非常简单的项目，展示如何使用TDD的方式，实现以交互为主的功能。

线段编辑器的功能说明 ​

通过上面对于功能的说明，对于线段编辑器，它的功能大致有这么几点：

  1. 在线段上设置锚点（Anchor），当拖动锚点时，锚点的位置改变；
  2. 在锚点与锚点之间，存在控制点（Control Point），当拖动控制点时，会在将控制点变成锚点；
  3. 当双击锚点时，会删除这个锚点。

我们选择的技术栈是TypeScript + React + Konva（React-Konva），测试框架使用Vitest。package.json 如下所示：

plain
{
  "name": "line-editor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "konva": "^8.3.12",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-konva": "^18.2.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vitest": "^0.22.1",
    "canvas": "^2.9.3"
  }
}

架构思路与任务拆分 ​

那么让我们分解任务列表：

  • 在线段编辑器（Line Editor）上设置锚点（Anchor）

    • 将线段（Line）数据，生成锚点
    • 在Line Editor重绘时，按照数据更新锚点位置

  • 在锚点与锚点之间设置控制点

    • 通过线段数,在两个锚点之间生成控制点（Control）
    • 在Line Editor重绘时，按照数据更新控制点位置

  • 拖动锚点时，改变线段中的位置

  • 拖动控制点时，在线段上增加锚点

  • 双击锚点时，删除锚点

接下来让我们进入开发：

思考题 ​

对于生成与更新锚点控制点的逻辑，要如何重构？

欢迎把你的项目代码地址分享在留言区，我们下节课再见！

最近更新