feat: 保存

src/App.vue

@@ -16,7 +16,7 @@ onMounted(() => {
   watchEffect(() => {
     if (instance.proxy.$refs.fullpage) {
       fullpage.value = instance.proxy.$refs.fullpage;
-      fullpage.value.api.setAllowScrolling(false);
+      // fullpage.value.api.setAllowScrolling(false);
     }
   });
 });

src/pages/section3.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="section section3" data-anchor="section3">
-    <canvas id="canvas"></canvas>
+    <canvas id="canvas" v-show="isShowCanvas"></canvas>
 
     <div class="can-scroll" style="" @scroll.stop="onPlayerScroll($event, 3)">
       <div style="width: 100%; height: 14000px" class="scroll-bar-3"></div>
@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { emitter } from "../emitter.js";
 import { CanvasPlayer } from "../utils/canvasPlayer.js";
 const setting = [
@@ -140,14 +140,18 @@ const props = defineProps({
 
 const player = new CanvasPlayer("canvas", setting);
 
+const isShowCanvas = ref(false);
+
 const handler = ({ index: currentIndex, nextIndex }) => {
   const { index } = nextIndex;
   if (index === 2) {
     console.log("fullpage", props.fullpage.api);
     props.fullpage.api.setAllowScrolling(false);
     player.enableScroll(3);
+    isShowCanvas.value = true;
   } else {
     player.unEnableScroll();
+    isShowCanvas.value = false;
     props.fullpage.api.setAllowScrolling(true);
   }
 };
@@ -167,7 +171,7 @@ onMounted(() => {
   });
   player.on("scroll-next", () => {
     console.log("scroll-next");
-    props.fullpage.api.moveSectionUp()
+    props.fullpage.api.moveSectionUp();
   });
   window.player = player;
 });

src/utils/canvasPlayer.js

@@ -129,19 +129,26 @@ export class CanvasPlayer extends Mitt {
     const scrollY = event.target.scrollTop;
 
     deltaY = scrollY - lastKnownScrollPosition;
-    console.log("deltaY", deltaY);
+
+    const clip = Array.from(this.clips).find(
+      (item) => item.id === this.currentType
+    );
+    const deltaHeight = clip.total * 100 - window.innerHeight;
+    const prcess = scrollY / deltaHeight;
+    const frame = Math.floor(clip.total * prcess);
+    this.currentFrame = frame;
+    this.reDraw(this.currentFrame, this.currentType);
     // this.watchScroll(event);
   }
   watchScroll(event) {
     if (this.canScroll) {
+      if (this.currentFrame < 0) {
+        this.currentFrame = 0;
+      }
       if (event.deltaY > 0) {
-        this.currentFrame < 1
-          ? (this.currentFrame = 1)
-          : this.autoIncrement(true);
+        this.autoIncrement(true);
       } else {
-        this.currentFrame < 1
-          ? (this.currentFrame = 1)
-          : this.autoIncrement(false);
+        this.autoIncrement(false);
       }
     }
     this.initClipScrollheight();
@@ -162,7 +169,7 @@ export class CanvasPlayer extends Mitt {
   }
 
   autoIncrement(na = true) {
-    if (this.currentFrame > 0) {
+    if (this.currentFrame >= 0) {
       const clip = Array.from(this.clips).find(
         (item) => item.id === this.currentType
       );
@@ -171,14 +178,14 @@ export class CanvasPlayer extends Mitt {
         return;
       }
       if (na) {
-        this.currentFrame++;
+        this.currentFrame += 1;
         // console.log("111", this.currentFrame);
         if (this.currentFrame === clip.total) {
           this.emit("scroll-next");
         }
         this.reDraw(this.currentFrame, this.currentType);
       } else {
-        this.currentFrame--;
+        this.currentFrame -= 1;
         // console.log("222", this.currentFrame);
         if (this.currentFrame === 0) {
           this.emit("scroll-prev");
@@ -222,7 +229,7 @@ export class CanvasPlayer extends Mitt {
   }
   initFirstFrame() {
     if (this.currentType) {
-      console.log("initFirstFrame", initFirstFrame);
+      console.log("initFirstFrame");
       const frameItem = this.frames.find(
         (item) => item.id == this.currentType && item.index == 1
       );