使用React + Ts编写的在线画图工具

React version 18.2.0

React redux version 8.0.2

如果对您有帮助,欢迎star

指令

npm install

npm start

npm run build

实现

• 矩形
• 三角形
• 圆形
• 线
• 文本
• 鼠标选区
• 更改颜色

ps 由于我没有找到能够实现三角形并且能保持三角形内部是可透明的办法,所以我使用了三个hr拼为三角形,从而形成内部可透明,如果你好的想法可以告诉 email:caro1xxxhv@gmail.com 或者 提issues

结构

-src
		- borad //画板
		- compoents //shape
		- navbar //工具条
		- store //redux文件夹
		- style // 我使用了styled component,所以样式都写在了ts文件内,该文件下的样式都用于shape
		- utils //一些shape的共有逻辑 & 事件

效果图

初始化画板

创建shape

缩放与拖动

选取

改色

Licencing

Apache 2.0 Licence