Merge branch 'hqyDevNewVersion' of http://git.dayaedu.com/liushengqiang/music-score into feature-tianyong-newVersion

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -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")

src/state.ts

@@ -15,7 +15,7 @@ import { getMusicSheetDetail } from "./utils/baseApi"
 import { getQuery } from "/src/utils/queryString";
 import { followData, skipNotePractice } from "/src/view/follow-practice/index"
 import { changeSongSourceByBate } from "/src/view/audio-list"
-import { moveSmoothAnimation, smoothAnimationState, moveSmoothAnimationByPlayTime, moveTranslateXNum, destroySmoothAnimation } from "/src/page-instrument/view-detail/smoothAnimation"
+import { moveSmoothAnimation, smoothAnimationState, moveSmoothAnimationByPlayTime, moveTranslateXNum, destroySmoothAnimation, calcClientWidth } from "/src/page-instrument/view-detail/smoothAnimation"
 import { storeData } from "/src/store";
 import { downloadXmlStr } from "./view/music-score"
 import { musicScoreRef } from "/src/page-instrument/view-detail/index"
@@ -1876,9 +1876,7 @@ watch(
     // 有字符 并且是竖向指法 并且是一行谱
     if(state.fingeringInfo?.name && state.fingeringInfo.direction === "vertical" && state.isSingleLine){
       nextTick(() => {
-        if (smoothAnimationState.osdmScrollDom) {
-          smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom.offsetWidth | 0
-        }
+        calcClientWidth()
       })
     }
     // 如果有指法，并且是竖向指法时，切换指法时，谱面宽度变化，需要重新渲染谱面