|
@@ -19,11 +19,11 @@ type smoothAnimationType = {
|
|
|
osmdCanvasPageDom: null | HTMLElement
|
|
|
osdmScrollDom: null | HTMLElement
|
|
|
osdmScrollDomWith: number
|
|
|
+ osdmScrollDomOffsetWidth: number
|
|
|
selectionBoxDom: null | HTMLElement
|
|
|
pointsPos: pointsPosType
|
|
|
translateXNum: number
|
|
|
aveSpeed: number
|
|
|
- clientWidth: number
|
|
|
}
|
|
|
|
|
|
const _numberOfSegments = 58 // 中间切割线的个数
|
|
@@ -39,11 +39,11 @@ export const smoothAnimationState = {
|
|
|
osmdCanvasPageDom: null,
|
|
|
osdmScrollDom: null,
|
|
|
osdmScrollDomWith: 0,
|
|
|
+ osdmScrollDomOffsetWidth: 0,
|
|
|
selectionBoxDom: null,
|
|
|
pointsPos: [], // 计算之后的点坐标数组
|
|
|
translateXNum: 0, // 当前谱面的translateX的距离 谱面的位置信息 由translateX和scrollLeft的偏移一起决定
|
|
|
- aveSpeed: 0, // 谱面的一帧的平均速度
|
|
|
- clientWidth: 0 // 屏幕宽度
|
|
|
+ aveSpeed: 0 // 谱面的一帧的平均速度
|
|
|
} as smoothAnimationType
|
|
|
|
|
|
// 监听显示与隐藏
|
|
@@ -104,10 +104,12 @@ export function destroySmoothAnimation() {
|
|
|
smoothBotDom: null,
|
|
|
osmdCanvasPageDom: null,
|
|
|
osdmScrollDom: null,
|
|
|
+ osdmScrollDomWith: 0,
|
|
|
+ osdmScrollDomOffsetWidth: 0,
|
|
|
+ selectionBoxDom: null,
|
|
|
pointsPos: [],
|
|
|
translateXNum: 0,
|
|
|
- aveSpeed: 0,
|
|
|
- clientWidth: 0
|
|
|
+ aveSpeed: 0
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -181,9 +183,12 @@ export function moveSmoothAnimation(progress: number, activeIndex: number, isMov
|
|
|
*/
|
|
|
function move_osmd(nowPointsPos: pointsPosType[0]) {
|
|
|
const speed = smoothAnimationState.aveSpeed * (state.speed / 60)
|
|
|
- const clientWidth = smoothAnimationState.clientWidth
|
|
|
- const clientMidWidth = smoothAnimationState.clientWidth / 2
|
|
|
- const { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
|
|
|
+ // 视口宽度
|
|
|
+ const clientWidth = smoothAnimationState.osdmScrollDomWith
|
|
|
+ const clientMidWidth = clientWidth / 2
|
|
|
+ let { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
|
|
|
+ left -= smoothAnimationState.osdmScrollDomOffsetWidth
|
|
|
+ right -= smoothAnimationState.osdmScrollDomOffsetWidth
|
|
|
const midBotNum = left + width / 2
|
|
|
// 分阶段移动
|
|
|
if (right > clientWidth) {
|
|
@@ -253,10 +258,11 @@ function smoothAnimationMove(pos: { x: number; y: number }, pointsPos: pointsPos
|
|
|
smoothAnimationState.canvasCtx && drawSmoothCurve(smoothAnimationState.canvasCtx, pointsPos, progresspointsPos)
|
|
|
}
|
|
|
/**
|
|
|
- * 计算屏幕宽度
|
|
|
+ * 计算视口宽度
|
|
|
*/
|
|
|
-function calcClientWidth() {
|
|
|
- smoothAnimationState.clientWidth = document.body.clientWidth
|
|
|
+export function calcClientWidth() {
|
|
|
+ smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
|
|
|
+ smoothAnimationState.osdmScrollDomOffsetWidth = smoothAnimationState.osdmScrollDom?.offsetLeft || 0
|
|
|
}
|
|
|
/**
|
|
|
* 创建dom
|
|
@@ -265,7 +271,6 @@ function createSmoothAnimation() {
|
|
|
// osdmScrollDom
|
|
|
const osdmScrollDom = document.querySelector("#musicAndSelection") as HTMLElement
|
|
|
smoothAnimationState.osdmScrollDom = osdmScrollDom
|
|
|
- smoothAnimationState.osdmScrollDomWith = osdmScrollDom?.offsetWidth | 0
|
|
|
// osmdCanvasPage
|
|
|
const osmdCanvasPageDom = document.querySelector("#osmdCanvasPage1") as HTMLElement
|
|
|
smoothAnimationState.osmdCanvasPageDom = osmdCanvasPageDom
|
|
@@ -285,7 +290,7 @@ function createSmoothAnimation() {
|
|
|
const smoothCanvasDom = document.createElement("canvas")
|
|
|
smoothCanvasDom.className = "smoothCanvas"
|
|
|
smoothAnimationState.canvasDom = smoothCanvasDom
|
|
|
- smoothAnimationState.canvasDomWith = osmdCanvasPageDom?.offsetWidth | 0
|
|
|
+ smoothAnimationState.canvasDomWith = osmdCanvasPageDom?.offsetWidth || 0
|
|
|
smoothCanvasDom.width = smoothAnimationState.canvasDomWith
|
|
|
smoothCanvasDom.height = smoothAnimationState.canvasDomHeight
|
|
|
smoothAnimationState.canvasCtx = smoothCanvasDom.getContext("2d")
|