基于react+ts的2D编辑器

475 阅读1分钟

一款基于react+ts实现2D编辑器

可实现: 文字编辑、旋转、放大缩小,图片自定义裁剪、放大缩小、svg放大缩小、表格的编辑等

操作方式

左侧有不同的分类tab点击对应的类型就会出现对应的元素 点击左侧tab

1.pic.jpg

然后出现元素列表

2.pic.jpg

如果想操作列表中的元素那么只需要右键按住拖到中间画布上就可,点击选中要操作的元素即可、这个时候就可以进行旋转放大、缩小、拉伸等操作,右侧操作栏还可以进行其他剪切操作等

3.pic.jpg

文字操作

像上面一样操作将文字元素拖到画布中,单击就是选中,可进行旋转、放大等操作

4.pic.jpg 双击将文字全选即将进入编辑状态

5.pic.jpg 再次单击进入文字编辑状态就可以随便编辑文字更改文字内容

6.pic.jpg

剩余表格和文字操作一样,svg和图形与图片操作一样

github地址:

github.com/zhanghouyi1…

演示地址:

zhanghouyi1.github.io/react-2d-ed…

总结:

目前该编辑器只是实现一部分基础功能,选中删除、合成图片、组合元素等还没有实现、后续会不断完善