羚珑视频编辑器开发总结
发布日期:2021-05-13 05:40:04 浏览次数:15 分类:博客文章

本文共 11609 字,大约阅读时间需要 38 分钟。

������������������������������������������������������������������������������������

������������������-*������

������������

������������������������������������������������������������������������������������������������������*���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������������������������

������������������������������������������������������������������PSD������������������������������������������������������AE������������������������������������*������**���������������������������������������������������������������������������������

������������������������

������������

���������������������PSD"���"���������

������ AE ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������������������������������������

  • ���������������������������������������������������������������������������������
  • ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
  • ���������������������������������������������������

���������������������������

������������

������������������������������������ 5 ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

������������������������������������������

  • ������������������������������������
  • ���������������������������������������������������������
  • ������������������������������/������

������������������ redux ��������������������������������������������������������������������������������������������������������� redux-undo������������������ reducer ������������������������������������������������������

import ReduxUndo from 'redux-undo'//��������������� reducerconst editReducer = (state = null, action) => {  switch (action.type) {    case VIDEO_INIT: {       const { templates } = action.payload       return { templates }    }    case VIDEO_TPL_CLEAR: {      return {}    }}//������ ReduxUndo ������ reducer ������������������export const undoEditReducer = ReduxUndo(editReducer, {  initTypes: [VIDEO_TPL_CLEAR],  filter: function filterActions (action, currentState, previousHistory) {    const { isUndoIgnore = false } = action    return !isUndoIgnore  },  groupBy: groupByActionTypes([SOME_ACTION]),  /*  ���������������  groupBy:(action, currentState, previousHistory) => {      },  */})

������������

  • initTypes������������������������������������������������������������������)
  • filter������������, ������������������������������������/���������������������������������
  • groupBy������������������������ groupByActionTypes ������������������������������������/��������������������������������������������������������������������������� null��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� null������ redux-undo ���������������������������������������������������

������ store.dispatch() ��� Undo/Redo Actions ���������������������������/������������

import { ActionCreators } from 'redux-undo'export const undo = () => (dispatch, getState) => {  dispatch(ActionCreators.undo())}export const redo = () => (dispatch, getState) => {  dispatch(ActionCreators.redo())}export const recovery = () => (dispatch, getState) => {  dispatch(ActionCreators.jumpToPast(0))  dispatch(ActionCreators.clearHistory())}

������

������������������������������������������������������������������������������redux���mobx���������:

  • ���������������������������������������������������
  • ���������������������������������������
  • ������������������������������������/������������������
    ���������redux������������������������������������������������redux store���������
  • ������������������������
  • ���������������������������������
  • ������������unmount���������������������������
    ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

������������

��������������������������������������������������������������������������������������������������������������������������������� AE���Final Cut ������������������������ Web ���������������������������������������������������������������������������

������������������������������������������

  • ������������������������������������������������������
  • ������������������������������������������������������������������������
  • ���������������������������������������������������������������������������������������
  • ���������������������������������������������������������������������
  • ���������������������������������������������������������������������������������������������������������
  • ������������������������������

��������������������������������������������������������������������� react-sortable-hoc ������������������������������������������ , ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ ���������������������������������������

������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

������������������react-dnd ��������� HTML5 ������ API ������,������������������������ DOM ������������������������������������������������������������������, ������������������������������������������������������������������HTML5 ������ API ��������������������������������������������������������������� IE ������������������������������������������������������������������������ react-dnd ��������������������������� HTML5 ���������������������������������������������������������������������������������������������������������������������

������������������������������������������������������

������������

������������������

import { DndProvider } from 'react-dnd'import HTML5Backend from 'react-dnd-html5-backend'

��� DndProvider ������������������������������������ backend ��� HTML5Backend

// --- ���������������������������

TemplateViewer ������������������������������������������������������������������������������������������������ renderLayerContent���*������������������

export function renderLayerContent (layer) {  return 
...
}export default function XxxxLayerComponent (layer) { ... return
{renderLayerContent(layer)}
}

CustomDragLayer ������������������������������������������������������������ renderLayerContent ������������������������������������������������������������������

������������

������������������������������������������������������������������������������������������������������������

������������������������������������������������������������

const [{ isHorizontalDragging }, horizontalDrag, preview] = useDrag({    item: {      type: DragTypes.Horizontal,    },    collect: monitor => ({      isHorizontalDragging: monitor.isDragging(),    }),  })  const [{ isVerticalDragging }, verticalDrag, verticalPreview] = useDrag({    item: {      type: DragTypes.Vertical,    },    collect: monitor => ({      isVerticalDragging: monitor.isDragging(),    }),  })

������������������������������������������������������

const [, drop] = useDrop({    accept: [DragTypes.Horizontal, DragTypes.Vertical],    drop (item, monitor) {      // ������������������    },    hover: throttle(item => {      // ������������������    }, 300),  })

��������������������������������������������� DOM ������������ DIV ������������������������������������������������������������������������������������������

// --- ������������ DOM
// --- ������������ DOM
// --- ������������ DOM
/* ������������������ */
{renderLayerContent(layer)}

������������������������������������������������*������������������������

������������������������������������������������������������������������������������������������������������������������������������������������������������������ 0

// --- ������������ DOM
...

������������������������������������������������������������������������������������

���������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

������������������������������������������������������������������������������������������������������ Stretch ������������������

function Stretch ({  children,  left,  width,  onStretchEnd,  onStretchMove,}) {  function handleMouseDown (align) {    // ������������  }  return (    
{children}
)}

������������������������������������������ Stretch ��� children ������������

{motions.map((motion, i) =>
{/* ������������������ */}
)}
{/* ������������ */}

������������

���������������

���������������������������������������������������������������������������������������������������*������������������������delete ������������������������������������������ react-hot-keys ���������

������������������������������������������������������������������������������������

import Hotkeys from 'react-hot-keys'
{ e.preventDefault() play() }}/>

��������� SVG

������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ push ������������������*��������������������������������������������� SVG ������������������������������������

${layer.text}
")`, }}/>

���������������

������������

������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������store������������������������������������������������������������������������������������������������������������������������������

������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������


������������������������������������

���������������������������������������AOTULabs������������������������������

上一篇:Taro 版本升级权威指南
下一篇:京喜小程序体验评分优化实践

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年04月29日 09时24分57秒