打造一款现象级微场景编辑器 演示地址
npm i
// 开发
npm start
// 浏览 http:https://localhost:9901
// 构建
npm run build
-
编辑器功能
- 拖拽
- 缩放
- 旋转
- 动画
- 撤销
- 重做
- 组合元素
- 页面管理
- 层级管理
- 辅助线显示
-
物料
- 文本
- 图片
- QQ语言通话
- 背景
- 地图
- 音效
- 模板
- 视频
- 艺术字
-
示例
- 示例-端午节
- 示例-儿童节
- 示例-高考加油
- 示例-1024
- 示例-双十一
- 示例-感恩节
- 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!