项目分离，将核心编辑库独立成一个模块，通过npm可以一键引入
打造一款现象级微场景编辑器 演示地址
# node 版本16+
# npm可使用国内镜像
npm config set registry https://registry.npmmirror.com/
# 首先安装lerna
npm i lerna -g
# 安装依赖
npm run install
# 构建包
npm run build
# 开发
npm start
# 浏览网站
http://localhost:9999/client.html
# 调试核心编辑器
http://localhost:9999/design.html
# 调试作品
http://localhost:9999/opus.html?id=作品编号
# 本地启动服务端
# 先将server/sql下sql文件导入数据库
npm run server
// 构建
npm run webpack
// 新增物料
npm run add-
编辑器功能
- 拖拽
- 缩放
- 旋转
- 动画
- 撤销
- 重做
- 组合元素
- 页面管理
- 层级管理
- 辅助线显示
-
物料
- 文本
- 图片
- QQ语言通话
- 背景
- 地图
- 音效
- 模板
- 视频
- 艺术字
-
示例
- 示例-端午节
- 示例-儿童节
- 示例-高考加油
- 示例-1024
- 示例-双十一
- 示例-感恩节
-
用户模块
- 登录
- 注册
- 作品列表
- PV数据统计
- 表单数据统计
- 1.在src/resource目录下新建组件
// index.js 文件的导出需要如下格式
export default {
edit: 编辑态组件,
render: 渲染太组件,
style: 属性面板配置文件（普通对象）,
size: { height: 物料高度 },
name: 物料名称(层级管理器显示的名字),
};- 2.在src/components.js文件中使用 registerComponent 注册物料
// components.js 新增如下调用
import 物料组件 from '../resource/物料组件';
registerComponent(自定义组件唯一标识字符串, 物料组件);集中物料仓库建设
- 字体库建设
- 形状库建设
- 艺术字建设（对文字阴影的绘制）
- 背景图片选择及裁剪
- 图层名称支持自定义
- 支持组动画序列播放
- 作品分享操作
- 翻页动画支持多种方式
示例模板规划
- 圣诞节模板
- 元旦节模板
- 2019总结模板
| QQ交流群 |
|---|
 |
Give a ⭐️ if this project helped you!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent