基于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 的结合使用,并在自己的开发之路上不断进步!
相关文章:
基于React和TypeScript的开源白板项目(Github项目分享)
在学习前端开发的过程中,有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch,这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应…...
1019记录
人瑞 - SDK - 外派米哈游 1,接口测试的工具 回答的是postman, 改进:JMeter 2,接口502,什么问题导致的?如何定位? 参考答案:502错误定义:是网关错误, 通俗…...
详细设计与概要设计区别-慧哥充电桩开源系统
概要设计更侧重于系统的整体构架和模块划分,而详细设计则关注具体模块的实现细节。在软件开发过程中,这两个阶段虽然紧密相关,但它们各自有着不同的目标和方法。以下是具体分析: 目标 概要设计:概要设计关注系统整体架…...
vue3 引入百度地图的三种方式
本次也是正好写了一个基于VUE3和百度地图的设计,但奈何第一次使用百度地图,在学习的途中遇到了很多问题,也发现网上的材料相对较少,因此做出了一些小总结,后续还会更新。 一、直接引入 直接在public中的index.html中进…...
鸿蒙开发设备管理:【@ohos.usb (USB管理)】
USB管理 本模块主要提供管理USB设备的相关功能,包括查询USB设备列表、批量数据传输、控制命令传输、权限控制等。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import …...
Golang | Leetcode Golang题解之第204题计数质数
题目: 题解: func countPrimes(n int) int {primes : []int{}isPrime : make([]bool, n)for i : range isPrime {isPrime[i] true}for i : 2; i < n; i {if isPrime[i] {primes append(primes, i)}for _, p : range primes {if i*p > n {break}…...
ELK日志系统和Filebeat采集器的学习总结
ELK是ElasticSerach、Logstash、Kina Logstash负责采集数据,Logstash有三个插件,input、filter、output,filter插件作用是对采集的数据进行处理,过滤的,因此filter插件可以选,可以不用配置。 ElasticSear…...
QML-Grid和OpacityMask
一个格子条,点击缩短 import QtQuick 2.0 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 //导入 import QtGraphicalEffects 1.12Window {id:windowwidth: 600height: 500color: "white"visible: trueGrid {visible: falseid:gridwidth:405he…...
MySQL的并发控制、事务、日志
目录 一.并发控制 1.锁机制 2.加锁与释放锁 二.事务(transactions) 1.事物的概念 2.ACID特性 3.事务隔离级别 三.日志 1.事务日志 2.错误日志 3.通用日志 4.慢查询日志 5.二进制日志 备份 一.并发控制 在 MySQL 中,并发控制是确…...
CNN文献综述
卷积神经网络(Convolutional Neural Networks,简称CNN)是深度学习领域中的一种重要模型,主要用于图像识别和计算机视觉任务。其设计灵感来自于生物学中视觉皮层的工作原理,能够高效地处理图像和语音等数据。 基本原理…...
python语句前面有一个$是什么意思
“$”是汇编语言中的一个预定义符号,等价于当前正汇编到的段的当前偏移值。例如:指令“jmp $3”中的“$”表示当前这条指令在代码段中的偏移量。 代表当前指令的地址,如: data segment str1 db a,b,c,d leng equ $-str 就是当前地…...
wsl安装Linux系统到指定位置
默认情况下,wsl安装的系统,会安装到系统C盘,长期下去,很容易把C盘的空间消耗完,从而影响系统的正常运行,所以我建议是将wsl所有的系统都安装到其它磁盘中,便于维护。 1、导出镜像 通过wsl -l -v 查看当前已安装的系统版本。 导出到当前目录位置,也可以指定目录位置。 w…...
[笔记] 高等数学在各工程门类的典型应用场景
1.应用场景 1.微积分似乎是在解算椭圆方程中引入的?但是这个数学工具第一次应用于现实的工程问题是什么时候?什么场景?什么问题? 微积分的发展确实与椭圆方程有关,但它最初的应用场景远不止于此。 微积分首次被应用…...
刀片服务器和机架式服务器有何区别
刀片服务器和机架式服务器有何区别 一、物理设计: 刀片服务器:刀片服务器是一种相对较轻薄的服务器设计,其物理形状类似于刀片,通常插入到专用的刀片机箱中。每个刀片通常包含一个或多个服务器节点,共享一些基本的资源…...
SQLyog脚本无限试用重置脚本
文章目录 引言脚本(win)必要操作、说明 引言 SQLyog 需要po jie,但是网上的没看到很好使的,直接下的官方。能处理14天试用也是很ok的。 脚本(win) echo offREM SQLyog注册表key,可能跟你的不一样,如果不一样,请替换…...
代码随想录训练营第二十九天 134加油站 135分发糖果 860柠檬水找零 406根据身高重建队列
第一题: 原题链接:134. 加油站 - 力扣(LeetCode) 思路: 需要三个变量,一个变量start记录结果也就是出发的第一个加油站,一个变量curSum来记录此时加油耗油后剩余的油量,如果发现c…...
智能生产管理系统设计
智能生产管理系统的设计旨在提升制造业的效率、灵活性和响应速度,通过集成先进的信息技术(如物联网IoT、大数据分析、人工智能AI、云计算等)实现生产过程的智能化。以下是一些关键设计要素和步骤,用于构建一个高效的智能生产管理系…...
满足GMSL静电防护要求的方案
什么是GMSL?它是做什么用的?它有什么优点?设计GMSL防静电有啥难度? 带着这些疑问我们先了解下什么是GMSL。 一.简述 GMSL GMSL(Gigabit Multimedia Serial Link)即千兆多媒体串行链路…...
【Odoo开源ERP】别把ERP与进销存软件混为一谈
导读:企业使用ERP软件能够实现管理升级,多方信息集成,按照既定策略逻辑运算,生成计划建议,减少人力成本,提高准确率的同时提高经营能力。 ERP,是MRP II的下一代软件,除了MRP II已有的…...
八、浏览器同源策略
上一篇👉: 浏览器垃圾回收机制 文章目录 浏览器同源策略1.同源策略的定义2.同源策略的作用3.同源策略的限制范围4.解决跨域方案汇总1.CORS(跨源资源共享)2.JSONP3.postMessage 跨域4.Nginx代理跨域5.Node.js中间件代理跨域6.document.domain…...
重载赋值运算符
c编译器可能会给类添加四个函数 1默认构造函数 2默认析构函数 3默认拷贝构造函数,对成员变量进行浅拷贝。 4默认赋值函数,队成员变量进行浅拷贝。 #include<iostream> using namespace std; class CGirl { public:int m_bh;string m_name;voi…...
数字信号处理及MATLAB仿真(2)——离散系统
上回书说到如何来编写一些简单的离散时间序列,今天咱们就来谈谈一些关于常系数差分方程的操作吧。 说到这里咱们对于常系数差分方程可能最关心的就是怎么去求解了。 其中最关键的部分就是filter函数,可以用来计算系统在输入信号为x的输出信号y。大家学过…...
大模型思维链(Chain-of-Thought)技术原理
大模型思维链(Chain-of-Thought)技术原理 NLP中 大语言模型LLM中的思维链 Chain-of-Thought(CoT) GoT_cot思维链-CSDN博客 https://zhuanlan.zhihu.com/p/680618940 https://zhuanlan.zhihu.com/p/661475269...
gda动态调试-cnblog
忽的发现gda有动态调试功能 动态监听返回值 框柱指定方法,选择调试方法,gda会自动监听函数的返回值,例如 自定义frida脚本 gda会自动生成hook该函数的frida脚本...
Double 4 VR仿真情景实训教学系统在法律专业课堂上的应用
随着科技的飞速发展,VR技术逐渐渗透到各个领域,为教育行业带来了革命性的变化。 VR技术以其独特的沉浸式体验,为法律课堂带来了前所未有的学习体验。通过Double 4 VR仿真情景实训教学系统,学生可以身临其境地进入虚拟的仿真情景中…...
k8s-第一节-minikube
minikube 服务器启动 # 启动集群 minikube start # 启动集群并使用docker驱动 minikube start --driverdocker To make docker the default driver:minikube config set driver docker # 查看节点。kubectl 是一个用来跟 K8S 集群进行交互的命令行工具 kubectl get node # 停…...
html+js+css在线倒计时
代码在图片后面 点赞加关注 谢谢大佬照顾😜 图例 时间到前 时间到后 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width,…...
构建LangChain应用程序的示例代码:55、如何实现多代理模拟,其中特权代理决定谁发言。这遵循与多代理分散发言者选择相反的选择方案
示例展示了如何实现一个多代理模拟,其中一个特权代理决定谁来发言。 这遵循与多代理分散式发言人选择相反的选择方案。 我们在一个虚构的新闻网络模拟环境中展示这种方法的一个例子。这个例子将展示我们如何实现能够: 在说话前思考终止对话 的代理。 导入LangChain相关模块…...
船舶雷达与导航系统选择7/8防水插座的原因分析
概述 船舶雷达与导航系统在现代航海中扮演着至关重要的角色,它们为船舶提供准确的导航信息,确保航行的安全和效率。在这些系统中,7/8防水插座的使用尤为重要,因为它们能够在恶劣的海上环境中提供稳定的电力和信号连接。接下来&am…...
墨烯的C语言技术栈-C语言基础-006
六.常量 C语言的常量为 字面常量 const修饰的常变量 #define定义的 枚举常量 int main() { // 四个都是字面常量 30; 3.14; "w"; // 字符常量 "abc"; // const修饰的常变量 const int a 10; // 在C语言中,const修饰的a,本质是变量,但不能直…...
常用SHELL命令
在 Unix/Linux 系统中,除了基本的文件和目录操作命令外,还有许多强大的工具命令,用于文本处理、系统监控、文件操作等。以下是一些常用的 Shell 命令,特别是类似 sed 和 awk 的文本处理工具: 文本处理命令 sed - 流编…...
Python脚本:将Word文档转换为Excel文件
引言 在文档处理中,我们经常需要将Word文档中的内容转换成其他格式,如Excel,以便更好地进行数据分析和报告。针对这一需求,我编写了一个Python脚本,能够批量处理指定目录下的Word文档,将其内容结构化并转换…...
【单链表】03 设L为带头结点的单链表,编写算法实现从尾到头反向输出每个结点的值。
🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux算法题上机准备 😘欢迎 ❤️关注 👍点赞 🙌收藏 ✍️留言 题目 设L为带头结点的单链表,编写算法实现从尾到头反向输出每个结点的值。 算法…...
鸿蒙开发设备管理:【@ohos.vibrator (振动)】
振动 说明: 开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 imp…...
【信息学奥赛】CSP-J/S初赛07 排序算法及其他算法在初赛中的考察
本专栏👉CSP-J/S初赛内容主要讲解信息学奥赛的初赛内容,包含计算机基础、初赛常考的C程序和算法以及数据结构,并收集了近年真题以作参考。 如果你想参加信息学奥赛,但之前没有太多C基础,请点击👉专栏&#…...
第N7周:seq2seq翻译实战-pytorch复现-小白版
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 理论基础 seq2seq(Sequence-to-Sequence)模型是一种用于机器翻译、文本摘要等序列转换任务的框架。它由两个主要的递归神经网络&#…...
java集合(1)
目录 一.集合概述 二. 集合体系概述 1. Collection接口 1.1 List接口 1.2 Set接口 2. Map接口 三. ArrayList 1.ArrayList常用方法 2.ArrayList遍历 2.1 for循环 2.2 增强for循环 2.3 迭代器遍历 一.集合概述 我们经常需要存储一些数据类型相同的元素,之前我们学过…...
分布式数据库HBase:从零开始了解列式存储
在接触过大量的传统关系型数据库后你可能会有一些新的问题: 无法整理成表格的海量数据该如何储存? 在数据非常稀疏的情况下也必须将数据存储成关系型数据库吗? 除了关系型数据库我们是否还有别的选择以应对Web2.0时代的海量数据? 如果你也曾经想到过这些问题, 那么HBase将是…...
接口测试流程及测试点!
一、什么时候开展接口测试 1.项目处于开发阶段,前后端联调接口是否请求的通?(对应数据库增删改查)--开发自测 2.有接口需求文档,开发已完成联调(可以转测),功能测试展开之前 3.专…...
已经安装deveco-studio-4.1.3.500的基础上安装deveco-studio-3.1.0.501
目录标题 1、执行exe文件后安装即可2、双击devecostudio64_3.1.0.501.exe2.1、安装Note (注意和4.1的Note放不同目录)2.2、安装ohpm (注意和4.1版本的ohpm放不同目录)2.3、安装SDK (注意和4.1版本的SDK放不同目录) 1、执行exe文件后安装即可 2、双击devecostudio64_3.1.0.501.e…...
【C++】 解决 C++ 语言报错:Use of Uninitialized Variable
文章目录 引言 使用未初始化的变量(Use of Uninitialized Variable)是 C 编程中常见且危险的错误之一。它通常在程序试图使用尚未赋值的变量时发生,导致程序行为不可预测,可能引发运行时错误、数据损坏,甚至安全漏洞。…...
2024年7月6日 十二生肖 今日运势
小运播报:2024年7月6日,星期六,农历六月初一 (甲辰年庚午月辛未日),法定节假日。 红榜生肖:猪、马、兔 需要注意:狗、鼠、牛 喜神方位:西南方 财神方位:正…...
ubuntu丢失网络/网卡的一种原因解决方案
现象 开机进入ubuntu后发现没有网络,无论是在桌面顶部状态栏的快捷键 还是 系统设置中,都没有”有线网“和”无线网“的选项,”代理“的选项是有的使用数据线连接电脑和手机,手机开启”通过usb共享网络“,还是没有任何…...
第6篇 共识机制深度解析:PoW、PoS、DPoS和PBFT
在区块链的世界里,有一个非常重要的概念叫做“共识机制”。它就像是区块链的心脏,保证大家在这条链上的信息是可靠的、不可篡改的。今天,我们就来通俗易懂地聊聊区块链里的四大共识机制:工作量证明(PoW)、权益证明(PoS)、委托权益证明(DPoS)和拜占庭容错(PBFT)。为…...
Windows环境使用SpringBoot整合Minio平替OSS
目录 配置Minio环境 一、下载minio.exe mc.exe 二、设置用户名和密码 用管理员模式打开cmd 三、启动Minio服务器 四、访问WebUI给的地址 SpringBoot整合Minio 一、配置依赖,application.yml 二、代码部分 FileVO MinioConfig MinioUploadService MinioController 三…...
LeetCode 196, 73, 105
目录 196. 删除重复的电子邮箱题目链接表要求知识点思路代码 73. 矩阵置零题目链接标签简单版思路代码 优化版思路代码 105. 从前序与中序遍历序列构造二叉树题目链接标签思路代码 196. 删除重复的电子邮箱 题目链接 196. 删除重复的电子邮箱 表 表Person的字段为id和email…...
在Apache HTTP服务器上配置 TLS加密
安装mod_ssl软件包 [rootlocalhost conf.d]# dnf install mod_ssl -y此时查看监听端口多了一个443端口 自己构造证书 [rootlocalhost conf.d]# cd /etc/pki/tls/certs/ [rootlocalhost certs]# openssl genrsa > jiami.key [rootlocalhost certs]# openssl req -utf8 -n…...
C语言力扣刷题11——打家劫舍1——[线性动态规划]
力扣刷题11——打家劫舍1和2——[线性动态规划] 一、博客声明二、题目描述三、解题思路1、线性动态规划 a、什么是动态规划 2、思路说明 四、解题代码(附注释) 一、博客声明 找工作逃不过刷题,为了更好的督促自己学习以及理解力扣大佬们的解…...
房屋租赁管理小程序的设计
管理员账户功能包括:系统首页,个人中心,用户管理,中介管理,房屋信息管理,房屋类型管理,租房订单管理,租房信息管理 微信端账号功能包括:系统首页,房屋信息&am…...
oracle sql语句 排序 fjd = ‘0101‘ 排在 fjd = ‘0103‘ 的前面
要实现这个排序需求,你可以使用 CASE 表达式来自定义排序逻辑。假设你有一个表格名为 your_table,并且有一个字段 fjd 存储类似 ‘0101’, ‘0103’ 这样的值,你可以这样编写 SQL 查询: SELECT * FROM your_table ORDER BY CASE …...