一款基于react+ts实现2D编辑器
可实现: 文字编辑、旋转、放大缩小,图片自定义裁剪、放大缩小、svg放大缩小、表格的编辑等
操作方式
左侧有不同的分类tab点击对应的类型就会出现对应的元素 点击左侧tab
然后出现元素列表
如果想操作列表中的元素那么只需要右键按住拖到中间画布上就可,点击选中要操作的元素即可、这个时候就可以进行旋转放大、缩小、拉伸等操作,右侧操作栏还可以进行其他剪切操作等
文字操作
像上面一样操作将文字元素拖到画布中,单击就是选中,可进行旋转、放大等操作
双击将文字全选即将进入编辑状态
再次单击进入文字编辑状态就可以随便编辑文字更改文字内容
剩余表格和文字操作一样,svg和图形与图片操作一样
github地址:
演示地址:
zhanghouyi1.github.io/react-2d-ed…
总结:
目前该编辑器只是实现一部分基础功能,选中删除、合成图片、组合元素等还没有实现、后续会不断完善