做网站和视频剪辑用曲面屏,国外引流推广平台,网吧可以做网站吗,做新闻源网站采集站赚钱在学习前端开发的过程中#xff0c;有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch#xff0c;这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应… 在学习前端开发的过程中有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应式的但它的功能非常强大适合用来练习和学习。 开源地址 https://github.com/mirayatech/NinjaSketch 使用的技术 Vite一个快速的构建工具React.js用于构建用户界面的JavaScript库TypeScriptJavaScript的超集提供了静态类型检查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 的结合使用并在自己的开发之路上不断进步
