随心秀(react版h5微场景编辑器)

当前正在进行的工作

项目分离，将核心编辑库独立成一个模块，通过npm可以一键引入

目标

打造一款现象级微场景编辑器 演示地址

预览

手机扫码预览

使用

# 首先安装lerna
npm i lerna -g
# 安装依赖
npm run install
# 构建包
npm run build
# 开发
npm start
# 浏览网站
http://localhost:9901/client.html
# 调试核心编辑器
http://localhost:9901/design.html
# 调试作品
http://localhost:9901/opus.html?id=作品编号

// 构建
npm run webpack

开发文档

• 快速开始
• 项目解析

功能

• 编辑器功能

  • 拖拽
  • 缩放
  • 旋转
  • 动画
  • 撤销
  • 重做
  • 组合元素
  • 页面管理
  • 层级管理
  • 辅助线显示

• 物料

  • 文本
  • 图片
  • 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!