this.stopCropping()
return
}
const currentCursorOffsetX = this.getFormattedOffsetX(e.clientX - containerLeft)
// mousedown与mouseup位置不一致，则不认为是点击,直接返回
if (Math.abs(currentCursorOffsetX - lastMouseDownOffsetX) > 3) {
return
}
// 更新当前鼠标指向的时间
this.currentCursorTime = currentCursorOffsetX * this.timeToPixelRatio
// 鼠标点击新增裁剪片段
if (!this.isCropping) {
this.addNewCropItemInSlider()
// 新操作位置为数组最后一位
this.startCropping(this.cropItemList.length - 1)
}
})
mousemove 这个，当非编辑状态时，当然是监听进度条来实现时间戳随动鼠标。而当需要选中开始或结束时间戳来进入编辑状态时，我最初设想的是监听时间戳本身，来达到选中时间戳的目的。而实际情况是：当鼠标接近开始或结束时间戳时，一直有一个鼠标随动的时间戳挡在前面，而且因为裁剪片段理论上可以无限增加，那我得监听2*裁剪片段个
mousemove 。基于此，只在进度条本身监听
mousemove ，通过实时比对鼠标位置和时间戳位置来确定是否到了相应位置, 当然得加一个
throttle 节流。
this.timeLineContainer.addEventListener('mousemove', e => {
throttle(() => {
const currentCursorOffsetX = e.clientX - containerLeft
// mousemove范围检测
if (currentCursorOffsetX < 0 || currentCursorOffsetX > containerWidth) {
this.isCursorIn = false
// 鼠标拖拽状态到达边界直接触发mouseup状态
if (this.isCropping) {
this.stopCropping()
this.timeIndicatorCheck(currentCursorOffsetX < 0 ? 0 : containerWidth, 'mouseup')
}
return
}
else {
this.isCursorIn = true
} this.currentCursorTime = currentCursorOffsetX * this.timeToPixelRatio
this.currentCursorOffsetX = currentCursorOffsetX
// 时间戳检测
this.timeIndicatorCheck(currentCursorOffsetX, 'mousemove')
// 时间戳移动检测
this.timeIndicatorMove(currentCursorOffsetX)
}, 10, true)()
})
3、实现拖拽与时间戳随动
下面是时间戳检测和时间戳移动检测代码
timeIndicatorCheck (currentCursorOffsetX, mouseEvent) {
// 在裁剪状态，直接返回
if (this.isCropping) {
return
} // 鼠标移动，重设hover状态
this.startTimeIndicatorHoverIndex = -1
this.endTimeIndicatorHoverIndex = -1
this.startTimeIndicatorDraggingIndex = -1
this.endTimeIndicatorDraggingIndex = -1
