在学习前端开发的过程中，有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目------NinjaSketch，这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应式的，但它的功能非常强大，适合用来练习和学习。
开源地址
https://github.com/mirayatech/NinjaSketch
使用的技术
-
Vite：一个快速的构建工具
-
React.js：用于构建用户界面的JavaScript库
-
TypeScript：JavaScript的超集，提供了静态类型检查
-
Rough.js：用于创建手绘风格的图形
-
CSS：用于样式设计
-
Vitest：一个用于单元测试的框架
-
Cypress：用于端到端测试的框架
-
Testing Library：一个用于测试React组件的库
NinjaSketch的功能
在NinjaSketch中，你可以进行以下操作：
选择工具
你可以选择铅笔、直线、矩形和文本工具，开始你的创作之旅。
绘制和移动
在画布上点击并拖动即可绘制图形。要移动某个元素，只需选择它并将其拖动到新的位置。你也可以通过拖动角落来调整元素的大小，但这个功能目前仅适用于矩形和直线。
编辑文本
点击画布并开始输入，即可在绘图中添加文本。你也可以编辑现有的文本内容。
缩放
使用Ctrl + 滚动或点击按钮可以放大和缩小画布，方便查看细节或全貌。
平移
按住空格键并拖动，或使用中键按钮来移动画布。
快捷键
使用以下快捷键可以提高你的工作效率：
-
画布导航：按空格键并拖动，或使用中键按钮。
-
撤销：Ctrl + Z。
-
重做：Ctrl + Y或Ctrl + Shift + Z。
-
放大：Ctrl + 加号。
-
缩小：Ctrl + 减号。
如何安装
要在本地环境中运行该项目，请按照以下步骤操作：
-
克隆这个仓库到你的本地机器。
-
在项目目录中运行npm install或yarn来安装所需的依赖项。
-
运行npm run start或yarn start来启动项目。
-
在浏览器中打开http://localhost:5173（或控制台显示的地址）来查看应用。
延伸阅读：作者的开发过程
项目开始时，我使用Rough.js渲染了一个画布，作为所有绘图的基础。然后，我专注于在画布上绘制图形，允许用户创建线条、矩形等形状。
接下来，我确保用户可以移动元素，这对于调整绘图非常重要。之后，我添加了调整元素大小的功能，以便用户更好地控制图形的形状。
为了让用户可以修正错误，我实现了撤销和重做功能。我还添加了自由绘图工具，使绘图体验更加自然，以及文本工具，用于在画布上添加标签或注释。
为了便于导航较大的绘图，我加入了平移和缩放工具。在所有功能实现后，我设计了整个用户界面，使其更加用户友好和吸引人。
最后，我使用Cypress和Testing Library进行了测试，确保绘图和操作文本、线条、矩形以及自由绘图的功能都正常工作。
在整个开发过程中，我记录了所学到的知识和实现功能的过程。这种记录不仅帮助我更好地理解了所构建的内容，还让我意识到，通过回顾和记录，我们可以更全面地理解所学的知识。这是一个在学习新事物时值得遵循的好习惯。
📚 学到的知识
在这个项目中，我学到了很多重要的技能，并对一些复杂的概念有了更深入的理解，提升了我的逻辑思维能力。
🧠 useHistory Hook
逻辑思维：创建useHistory钩子教会了我如何管理保存、撤销和重做操作，需要深入理解如何跟踪变化和规划用户操作。
📏 坐标和测量
精度：我在处理形状和点时变得更加精准，比如确定一个点是否在形状内部，这需要仔细的测量。数学技能：我使用数学函数来确保所有元素都被正确放置，并计算距离。
🎨 发现Rough.js
新工具：我发现了Rough.js，这个工具可以让我创建出手绘风格的图形，这对我来说是一个新的且令人兴奋的工具。
🔍 深入研究函数
复杂函数：我花时间理解了getSvgPathFromStroke函数，它可以将绘图动作转换为平滑的路径。
✏️ 管理点和绘图
处理点：我学会了如何收集和使用绘图中的点，这涉及到理解和管理数据，以反映用户的操作。
🎣 React Hooks和渲染
新知识：我学习了useLayoutEffect，这个钩子可以确保在屏幕更新前完成某些变化，对于某些绘图功能非常有用。
🎡 高级事件处理
用户交互：我处理了wheel事件监听器，添加了缩放和平移功能，使应用更加互动和用户友好。
📈 总体成长
这个项目的每一个部分都帮助我更好地理解了如何构建应用程序、管理复杂信息和改善用户体验。这不仅仅是制作一个工具，更是解决问题、学习新知识和提升自己技能的过程。
💭 如何改进
-
增加更多颜色选项。
-
添加更多工具，比如圆形、橡皮擦等。
-
增加更多形状，比如三角形、星形等。
-
增加更多快捷键，提高操作效率。
-
增加更多主题，比如暗黑模式、亮色模式等。
-
增加更多文本选项，比如字体大小、字体颜色等。
-
在某些地方使用类型定义来代替any类型，以提高代码的可维护性。
结束
通过这个项目，希望大家能够更好地理解 React和 TypeScript 的结合使用，并在自己的开发之路上不断进步！