Skip to content
随心秀(react版h5微场景编辑器),一款类似【易企秀】【兔展】的H5微场景编辑器
JavaScript CSS Other
Branch: master
Clone or download

README.md

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

目标

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

预览

手机扫码预览

手机扫描体验

使用

npm i
// 开发
npm start
// 浏览 http://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交流群
微信交流群 QQ交流群

Give a ⭐️ if this project helped you!

You can’t perform that action at this time.