基于React和TypeScript的开源白板项目（Github项目分享）

在学习前端开发的过程中，有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——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 的结合使用，并在自己的开发之路上不断进步！