多种刻度的刻度尺

界面简介

刻度尺可以说是比较复杂的一环了，因为包含 5种 尺度的变化，同时对应着后续音视频轨道、图片轨道等内容的长短，稍有偏差则会影响成品效果。

实现方式

本示例采用传统盒子布局，其实刻度尺这种多容器，精度要求高的界面使用传统方式渲染必然存在性能问题。熟练canvas的可使用canvas制作来优化，本例中未使用canvas是作者canvas不精通（精力有限无法深入学习canvas高级用法，要学的还有很多，新手可参考视频拆条项目中的刻度尺为canvas制作）

动态刻度的实现方式

本例中包含element-ui中的基本刻度及其时长对照表
1s ——— 0
10s ——— 25
60s ——— 50
300s ———75
600s ———100

---

采用工具(tools)转换秒数与HH:MM:SS格式的显示转化;(使用使用第三方moment便捷转换)

// 使用工具  将总秒数转化为hh:mm:ss格式
const moment = require("moment");
// 参数  总时长(s),刻度尺区间(number)  
function getItemTimezoneValue(totalSecond, currentItemTimezone) {
    if (totalSecond) {
        const handleTime = moment.duration(totalSecond * currentItemTimezone, "seconds");
        const hh = handleTime.get('hours') > 9 ? handleTime.get('hours') : `0${handleTime.get('hours')}`
        const mm = handleTime.get('minutes') > 9 ? handleTime.get('minutes') : `0${handleTime.get('minutes')}`
        const ss = handleTime.get('seconds') > 9 ? handleTime.get('seconds') : `0${handleTime.get('seconds')}`;
        return `${hh}:${mm}:${ss}`
    } else {
        return 0
    }

}

module.exports = { getItemTimezoneValue }

在通过filter过滤器进一步转化成想要的数据

filters_ItemTimezone(val, currentItemTimezone) {
      return getItemTimezoneValue(val, currentItemTimezone);
}

奇技淫巧？

多采用CSS样式完成刻度布局，其中普通的flex布局+space-around的对对齐方式，长刻度线采用nth-child选中；参考代码如下

:nth-child(5n + 1) {
          height: 10px;
}
:nth-child(10n + 1) {
          height: 15px;
}
:nth-child(10) {
          height: 5px;
}