🎒 这是一个类似墨刀
原型图编辑器类工具的一个简单纯前端构思实现,使用纯CSS
样式构建图像操作对象,支持框选,对象组合,锁定,隐藏,右键菜单操作和一些基础CSS样式绑定,设计思路是使用CSS transform定位做图层位置,所以会导致一个只能是固定页面宽高
的问题,无法做自动宽比
实现,目前还是处于模块实现阶段,🤔也不知道有没有什么实际的产品业务落地,先做着看吧 🤣
技术栈 Vue3+TypeScript+Vite 这些就不说了
- UI组件库 @arco-design/web-vue
- 画尺子用的 pixi.js
- 图标等一些 vuetify
vuetify 是一开始着急了用这个图标组件,看看后期有没有时间把它剔除掉吧!
- ✅ 矩形样式宽、高、背景颜色、圆角、阴影、🙅旋转)
- ✅ 文本样式颜色、阴影、🙅输入自动宽高、🙅选择字体、🙅加粗、🙅下划线、🙅删除线
- ✅ 图层组合、解散、对齐
- ✅ 图片上传
- ✅ 添加图标🙅搜索图标
- ✅ 图层对齐吸附检测
- ✅ 标尺🙅拖拉参考线、🙅缩放、🙅区域拖动
- ✅ 图层管理
- ❌ 快捷键、撤销重做
- ❌ 图层添加组件
- ❌ 页面管理
- ❌ 流程图
- ❌ 脑图
🧱Vercel需要墙!打不开的同学自行下载项目在本地开发环境预览
https://vue-material-admin-alpha.vercel.app/#/editor/oreo-editor
⚠️ 本地开发需要nodejs 18/20
vite5不支持更低的nodejs版本
git clone https://github.com/armomu/oreo-editor
cd oreo-editor
pnpm install
pnpm run dev