this.cropItemHoverIndex = -1
this.cropItemList.forEach((item, index) => {
if (currentCursorOffsetX >= item.startTimeIndicatorOffsetX
&& currentCursorOffsetX <= item.endTimeIndicatorOffsetX) {
this.cropItemHoverIndex = index
}
// 默认始末时间戳在一起时优先选中截止时间戳
if (isCursorClose(item.endTimeIndicatorOffsetX, currentCursorOffsetX)) {
this.endTimeIndicatorHoverIndex = index
// 鼠标放下，开始裁剪
if (mouseEvent === 'mousedown') {
this.endTimeIndicatorDraggingIndex = index
this.currentEditingIndex = index
this.isCropping = true
}
}
else if (isCursorClose(item.startTimeIndicatorOffsetX, currentCursorOffsetX)) {
this.startTimeIndicatorHoverIndex = index
// 鼠标放下，开始裁剪
if (mouseEvent === 'mousedown') {
this.startTimeIndicatorDraggingIndex = index
this.currentEditingIndex = index
this.isCropping = true
}
}
})
},
timeIndicatorMove (currentCursorOffsetX) {
// 裁剪状态，随动时间戳
if (this.isCropping) {
const currentEditingIndex = this.currentEditingIndex
const startTimeIndicatorDraggingIndex = this.startTimeIndicatorDraggingIndex
const endTimeIndicatorDraggingIndex = this.endTimeIndicatorDraggingIndex
const currentCursorTime = this.currentCursorTime
let currentItem = this.cropItemList[currentEditingIndex] // 操作起始位时间戳
if (startTimeIndicatorDraggingIndex > -1 && currentItem) {
// 已到截止位时间戳则直接返回
if (currentCursorOffsetX > currentItem.endTimeIndicatorOffsetX) {
return
}
currentItem.startTimeIndicatorOffsetX = currentCursorOffsetX
currentItem.startTime = currentCursorTime
}
// 操作截止位时间戳
if (endTimeIndicatorDraggingIndex > -1 && currentItem) {
// 已到起始位时间戳则直接返回
if (currentCursorOffsetX < currentItem.startTimeIndicatorOffsetX) {
return
}
currentItem.endTimeIndicatorOffsetX = currentCursorOffsetX
currentItem.endTime = currentCursorTime
}
this.updateCropItem(currentItem, currentEditingIndex)
}
}
第三步
裁剪完成后下一步当然是把数据丢给后端啦。
把用户当:sweet_potato:（#红薯#）
用户使用的时候小手一抖，多点了一下
添加 按钮，或者有帕金森，怎么都拖不准，就可能会有数据一样或存在重合部分的裁剪片段。那么我们就得过滤掉重复和存在重合部分的裁剪。还是直接看代码方便
/**
* cropItemList排序并去重
*/
cleanCropItemList () {
let cropItemList = this.cropItemList
