Demo介绍

MetaStudio视频制作编辑页面需要用到多图层的编辑能力，如下图所示：

针对多图层编辑能力，本Demo提供了JavaScript的实现，供参考使用。

前提及准备

了解HTML及JavaScript基础知识，开发环境安装nodejs。

Demo实现效果

• 在背景上添加图片图层，移动图层位置、调整图层大小、调整图层上下位置。
• 在背景上添加人物图层，移动图层位置、调整图层大小、调整图层上下位置。
• 在背景上添加文字图层，移动图层位置、调整图层大小、调整图层上下位置。
• 在背景上添加视频图层，移动图层位置、调整图层大小、调整图层上下位置。
• 在背景上添加字幕图层，可以移动图层位置。

Demo使用说明

1、代码目录说明

• assets: 目录下放资源文件，包括图片图标等。
• dist: Demo打包js文件。
• src/preview-design： 多图层组件代码。
• src/index.js： Demo js实现代码。
• index.html: Demo入口文件。

2、组件实现示例

                    
                    Copied!
                
import { PreviewDesignFactory } from './preview-design/PreviewDesignFactory'
(window).CDNAddress = '' //组件中图标使用地址配置，可根据实际项目修改

const background = {
src: './assets/images/background/1.png' // 背景图片地址
}
const lists  = [{
  src: './assets/images/layer1.png',
  isCopy: true,
  isApply: true,
  w: 939,
  h: 402,
  x: 60,
  y: 60
},
{
  src: './assets/images/digital/xiaoya_qipao.png', // 图层图片地址
  layer_type: 'IMAGE', // IMAGE:图片, HUMAN:数字人, VIDEO: 视频, TEXT: 文本
  asset_id: 222,
  isCopy: false, // 是否显示复制按钮
  isApply: false,// 是否显示应用到全局按钮
  isShowDelete: true, // 是否显示删除按钮
  isFixedRatio: true, // 固定比例
  // x y w h 如果有其中一个为null或者是undefined，组件会根据图片大小设置w h， x y 会设置为居中位置
  w: 598,  // 图层宽度
  h: 1080, // 图层高度
  x: null, // x 轴 位置，以左上角为原点0,0
  y: null, // y 轴 位置，以左上角为原点0,0
}]

let options = {
height: 900, // canvas画布高度，需要和实际页面显示的高度一致
width: 1600, // canvas画布宽度，需要和实际页面显示的宽度一致
background: background, // 背景配置
lists: lists, // 图层列表
isStop: false, // 是否动画渲染页面
onChange: (lists)=>{
  // 图层数据变化触发回调
  if (!Array.isArray(lists)) {
    return
  }
  console.log('onChange', lists)
},
onApply: (data) => {
  // 点击应用到全局触发回调
  console.log('apply', data)
},
onSelected: (data) => {
  // 选中图层触发回调方法
},
// 返回false 复制不生效，返回true 复制生效
onBeforeCopy: (lists, copyShape) => {
  const videos = lists.filter(
    item => item.layer_type === 'VIDEO'
  );
  // 限制视频只能有2个
  if (videos.length >= 2) {
    return false;
  }
  return true;
},
}

3、组件使用说明

把以下组件，拷贝到自己项目目录下：

• src/preview-design 组件代码
• assets/preview-design 组件用到的图标素材

引入后，在组件代码中修改图标或者图片地址可以根据项目实际图标位置修改为自己项目对应地址。 关键词：./assets/preview-design。

图层组件依赖 uuid 第三方库，需要在自己项目中运行 npm install uuid 进行安装。

4、Demo运行可以使用webpack的模块打包

• src/index.js 为使用组件的业务逻辑实现，修改index.js的逻辑后需要运行: npm run build。
• index.html 引用的是打包后的dist/main.js代码，npm run build后直接打开index.html。
• 引入自己项目直接引入src/preview-design即可，不需要引入打包文件。
• http-server 运行查看，直接点击index.html，添加视频图层会有跨域问题，建议使用http-server运行。