项目解析

目录结构

dist----|------------- 构建结果
        |0.0.1 ----|------- 当次构建时版本
        |index.html|------------- 主站入口
        |wap.html -|----------- 作品入口
packages-----|---------- 项目源码
        |client|------------- 示例站点
        |opus ----|------------ 作品展示站
        |design ---|------------ 核心编辑器（npm包）
        |constants|---------- 常量（npm包）
        |core -----|------------ 核心（npm包）
        |resource -|------------ 物料库（npm包）
        |preview ----|------------ 作品预览（npm包）
        |utils ----|------------ 工具库（npm包）
webpack.build.config.js|------------- 构建时webpack配置
webpack.config.js -----|------------- 开发时webpack配置

拖拽实现

项目的核心在于对物料的拖拽缩放操作 查看生成的作品，会发现就是一个单屏的翻页页面，每个页面由多个元素组成。 那每个元素的如何在编辑时的位置与作品展示时的位置相同呐，可以使用绝对定位控制元素位置。 由此可以得出，我们在编辑单个元素时，就设置其绝对定位，之后再存储这个定位信息，展示时就会和预期一样了

数据结构

// 每个物料节点的数据表示
{
    name: '物料名称，在层级管理中显示',
    type: '物料类型',
    nodeType: '物料节点类型', // 多个物料可以成组
    belong: '归属组的唯一标识',
    // 四维属性
    rect: {
        top: 0,
        left: 0,
        width: 320,
        height: 40,
        // 旋转角度
        rotate: 0,
    },
    // 动画组
    animates: [{
        // 名称
        name: '',
        // 执行时间
        duration: 1,
        // 延迟
        delay: 0,
        // 循环次数
        repeat: 1,
    }, ...],
    // 物料私有属性，可添加特有属性
    attrs: {
        color: 'red',
        fontSize: 12,
        text: '双击编辑文本',
        bgColor: '',
        lineHeight: 1.5,
    },
}

整个编辑器内容的数据表示
{
  // 编辑组件列表
  editList: {
     p0q24p: 物料节点数据表示
  },
  // 当前正在操作的编辑框key
  activeEditKey: [],
  // 组合列表
  groupList: {
    // p0q24p: [
    //   'ftpdy8',
    //   'upivzn',
    // ],
  },
  // 页面列表
  pages: [
    [
      // 'p0q24p',
    ],
  ],
  // 当前激活的页面
  activePage: 0,
  // 当前正在活动的元素尺寸和位置
  moveBoundRect: {},
  // 背景图片
  backGroundImage: '',
  // 背景音效地址
  backMusicUrl: '',
  // 移动标识
  moveInfo: null,
}

页面适配

在编辑设计时，使用的工作尺寸是320*480，而现代的手机各种尺寸层出不穷，如何做到各个手机浏览可以达到预期效果呐。

<meta name="viewport" id="viewport" content="width=320,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

将窗口缩放到width=320，这样就不用再重新计算保存的数据，可以直接原样输出到页面中。 至于高度，一般会大于480，这时我们计算窗口高度，垂直居中视图，上下留白，就可以达到预料中的效果了。