79｜线段编辑器：架构思路与任务拆分
徐昊
你好，我是徐昊。从今天开始，我们就来使用 TDD 的方式实现一个线段编辑器（Line Editor）。
在之前的三个项目中，我们展示了如何使用 TDD 的方式来实现功能以及框架。接下来，我们要通过一个非常简单的项目，展示如何使用 TDD 的方式，实现以交互为主的功能。
线段编辑器的功能说明
00:00 / 00:00
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
通过上面对于功能的说明，对于线段编辑器，它的功能大致有这么几点：
在线段上设置锚点（Anchor），当拖动锚点时，锚点的位置改变；
在锚点与锚点之间，存在控制点（Control Point），当拖动控制点时，会在将控制点变成锚点；
当双击锚点时，会删除这个锚点。
我们选择的技术栈是 TypeScript + React + Konva（React-Konva），测试框架使用 Vitest。package.json 如下所示：
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了徐昊使用TDD的方式实现线段编辑器的架构思路与任务拆分。文章首先介绍了线段编辑器的功能，包括设置锚点、控制点的拖动和删除锚点等。接着，作者展示了使用TypeScript + React + Konva（React-Konva）和Vitest作为测试框架的技术栈，并给出了package.json的配置。在架构思路与任务拆分部分，作者详细列出了实现线段编辑器功能的任务列表，包括设置锚点、生成锚点、更新锚点位置、设置控制点、更新控制点位置等。最后，作者提出了思考题，邀请读者分享项目代码地址。整篇文章通过视频和文字结合的方式，清晰地展示了如何使用TDD的方式实现线段编辑器，并提供了实际的代码示例和思考题，有助于读者快速了解并参与讨论。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《徐昊 · TDD 项目实战 70 讲》，新⼈⾸单¥98
《徐昊 · TDD 项目实战 70 讲》，新⼈⾸单¥98
立即购买
登录 后留言
全部留言(2)
- 最新
- 精选
davixhttps://github.com/davix/geektime-tdd-line-editor 覺得更新锚点的地方可以不更新，而先刪再加 （使用不可變數據）2022-09-16归属地：北京
aoe原来 MVP 是前端中对测试友好的一个框架2022-09-13归属地：浙江
收起评论
