轨道区域编写

前言

轨道区域在 视频编辑1.0版本，作者采用的是原生js编写的功能，虽然1.0算是马马虎虎但还是有很多bug未发现、未处理；

依赖包

本次的轨道区域的拖拽等效果采用的是第三方插件库vue-draggable-resizable，确实省了我不少力气；vue-draggable-resizable 在这里就不多赘述了，详细参考官方文档 参考文档

完成思路

通过拖拽上面的素材分析其素材类型、时长、鼠标在屏幕中的Y方向距离判断该轨道往哪个位置增加。

素材类型

• 视频文件 ‘0’
• 视频文件 ‘1’
• 视频文件 ‘2’
• 视频文件 ‘3’

鼠标位置

通过判断鼠标Y方向位置是否大于 555，超过则增加轨道，小于则取消操作；

轨道长度计算

通过时长与当前刻度尺的标准计算，再与元素的定距做计算。（200为单个区间元素宽度）；

tools>calculatorWidth.js

// 计算轨道宽度工具
// 接受 时长s 当前刻度尺标准 s
function getCalculatorWidth(timeDuartion, standard) {
    return (timeDuartion / standard) * 200
}

module.exports = { getCalculatorWidth }

拖拽情况下的轨道长度计算

通过监听 resizing 事件能够获取当前处理的x,y,w,height 的值
但是无法更新data数组中的数据实现同步，那么就需要在选中时候标记当前操作对象；
通过监听activated事件传递的activatedSelect（item, index, '0'），将当前操作的对象，下表，操作的类型实现记录

onResize: function (x, y, w, height) {
      const activatedObj = this.$store.state.activedSelect;
      const index = activatedObj.index;
      // 更新数组中的x w值
      switch (activatedObj.type) {
        case "0":
          this.updateTrackWhenResizeFun(this.videoTrackListData, index, x, w);
          break;
        case "1":
          this.updateTrackWhenResizeFun(this.audioTrackListData, index, x, w);
          break;
        case "2":
          this.updateTrackWhenResizeFun(this.textTrackListData, index, x, w);
          break;
        case "3":
          this.updateTrackWhenResizeFun(this.pictureTrackListData, index, x, w);
          break;
        default:
          break;
      }
}

// 拖拽时更新 数字下标的x w timeDuartion
    updateTrackWhenResizeFun(arr, index, x, w) {
      arr[index]["x"] = x;
      arr[index]["w"] = w;
      arr[index]["timeDuartion"] = getTimeDuartion(
        w,
        this.$store.state.currentItemTimezone
      );
}


 activatedSelect(item, index, type) {
      item.type = type;
      item.index = index;
      this.$store.commit("updateActivatedSelect", item);
      this.flag = true;
}

刻度尺标准改变情况下的轨道长度变化

监听刻度标杆的变化，计算轨道x,w数字进行赋值，
 watch: {
    // 刻度尺度变化改变
    "$store.state.currentItemTimezone"(val, old) {
      if (val) {
        this.changeTrackPositionXAndWidth(val, old);
      }
    }
}
// 改变轨道元素长短
    changeTrackPositionXAndWidth(newTimezoneValue, oldTimezoneVale) {
      const mediaListData = [
        this.videoTrackListData,
        this.audioTrackListData,
        this.textTrackListData,
        this.pictureTrackListData,
      ];
      mediaListData.forEach((arrItem) => {
        arr.item.forEach((val) => {
          val.x = getPositionX(val.x, newTimezoneValue, oldTimezoneVale);
          val.w = getCalculatorWidth(val.timeDuartion, newTimezoneValue);
        });
      });
}

轨道的删除

本想着用快捷键delete删除 才发现仅input才能监控到键盘的keyboard实践，踩了一个坑 最终实现使用了v-hotkey 这个插件做键盘事件的监听处理，v-hotkey 文档参考官方文档