|
@@ -19,7 +19,7 @@ type smoothAnimationType = {
|
|
|
osmdCanvasPageDom: null | HTMLElement
|
|
|
osdmScrollDom: null | HTMLElement
|
|
|
osdmScrollDomWith: number
|
|
|
- osdmScrollDomOffsetWidth: number
|
|
|
+ osdmScrollDomOffsetLeft: number
|
|
|
selectionBoxDom: null | HTMLElement
|
|
|
pointsPos: pointsPosType
|
|
|
translateXNum: number
|
|
@@ -39,7 +39,7 @@ export const smoothAnimationState = {
|
|
|
osmdCanvasPageDom: null,
|
|
|
osdmScrollDom: null,
|
|
|
osdmScrollDomWith: 0,
|
|
|
- osdmScrollDomOffsetWidth: 0,
|
|
|
+ osdmScrollDomOffsetLeft: 0,
|
|
|
selectionBoxDom: null,
|
|
|
pointsPos: [], // 计算之后的点坐标数组
|
|
|
translateXNum: 0, // 当前谱面的translateX的距离 谱面的位置信息 由translateX和scrollLeft的偏移一起决定
|
|
@@ -105,7 +105,7 @@ export function destroySmoothAnimation() {
|
|
|
osmdCanvasPageDom: null,
|
|
|
osdmScrollDom: null,
|
|
|
osdmScrollDomWith: 0,
|
|
|
- osdmScrollDomOffsetWidth: 0,
|
|
|
+ osdmScrollDomOffsetLeft: 0,
|
|
|
selectionBoxDom: null,
|
|
|
pointsPos: [],
|
|
|
translateXNum: 0,
|
|
@@ -135,6 +135,10 @@ export function moveSmoothAnimationByPlayTime(time?: number) {
|
|
|
const noteDuration =
|
|
|
(nextIndex > state.times.length - 1 ? state.times[state.activeNoteIndex]?.endtime : state.times[nextIndex].time) -
|
|
|
state.times[state.activeNoteIndex]?.time
|
|
|
+ // 妙极客曲目 有可能2个音符时值一样
|
|
|
+ if (noteDuration <= 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
// 当前时值在该区间的占比
|
|
|
let playProgress = (currentTime - state.times[state.activeNoteIndex]?.time) / noteDuration
|
|
|
// 华为手机 fixtime 有个默认0.08的值,所以进度可能为负数 ,这里兼容一下
|
|
@@ -187,8 +191,8 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
|
|
|
const clientWidth = smoothAnimationState.osdmScrollDomWith
|
|
|
const clientMidWidth = clientWidth / 2
|
|
|
let { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
|
|
|
- left -= smoothAnimationState.osdmScrollDomOffsetWidth
|
|
|
- right -= smoothAnimationState.osdmScrollDomOffsetWidth
|
|
|
+ left -= smoothAnimationState.osdmScrollDomOffsetLeft
|
|
|
+ right -= smoothAnimationState.osdmScrollDomOffsetLeft
|
|
|
const midBotNum = left + width / 2
|
|
|
// 分阶段移动
|
|
|
if (right > clientWidth) {
|
|
@@ -233,8 +237,8 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
|
|
|
smoothAnimationState.translateXNum += speed * 5
|
|
|
}
|
|
|
// 最多移动的位置
|
|
|
- const maxTranslateXNum =
|
|
|
- smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - (smoothAnimationState.osdmScrollDom?.scrollLeft || 0)
|
|
|
+ const osdmScrollDomScrollLeft = smoothAnimationState.osdmScrollDom?.scrollLeft || 0
|
|
|
+ const maxTranslateXNum = smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - osdmScrollDomScrollLeft
|
|
|
if (smoothAnimationState.translateXNum > maxTranslateXNum) {
|
|
|
smoothAnimationState.translateXNum = maxTranslateXNum
|
|
|
}
|
|
@@ -262,7 +266,7 @@ function smoothAnimationMove(pos: { x: number; y: number }, pointsPos: pointsPos
|
|
|
*/
|
|
|
export function calcClientWidth() {
|
|
|
smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
|
|
|
- smoothAnimationState.osdmScrollDomOffsetWidth = smoothAnimationState.osdmScrollDom?.offsetLeft || 0
|
|
|
+ smoothAnimationState.osdmScrollDomOffsetLeft = smoothAnimationState.osdmScrollDom?.getBoundingClientRect().left || 0
|
|
|
}
|
|
|
/**
|
|
|
* 创建dom
|
|
@@ -469,8 +473,8 @@ function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, clo
|
|
|
*/
|
|
|
function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
|
|
|
context.lineWidth = 2
|
|
|
- context.lineJoin = 'round';// 优化锯齿
|
|
|
- context.lineCap = 'round'; // 优化锯齿
|
|
|
+ context.lineJoin = "round" // 优化锯齿
|
|
|
+ context.lineCap = "round" // 优化锯齿
|
|
|
context.strokeStyle = "rgba(255,255,255,0.6)"
|
|
|
drawLines(context, pointsPos)
|
|
|
if (progresspointsPos?.length) {
|