feat: save

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
-    "fullpage.js": "^4.0.20",
+    "fullpage.js": "^4.0.22",
     "gsap": "^3.12.5",
     "mitt": "^3.0.1",
     "sass": "^1.70.0",

pnpm-lock.yaml

@@ -12,8 +12,8 @@ dependencies:
     specifier: ^2.0.0
     version: 2.0.0(vue@3.4.14)
   fullpage.js:
-    specifier: ^4.0.20
-    version: 4.0.20
+    specifier: ^4.0.22
+    version: 4.0.22
   gsap:
     specifier: ^3.12.5
     version: 3.12.5
@@ -1770,8 +1770,8 @@ packages:
     requiresBuild: true
     optional: true
 
-  /fullpage.js@4.0.20:
-    resolution: {integrity: sha512-y72V3oV/pFccPYaxnUosEltQP9tXH340x479oQSS9Yab0L0YpIPNE0PFA68l6XEq5Lhw7IRqyCgVwL+WdjtQdA==}
+  /fullpage.js@4.0.22:
+    resolution: {integrity: sha512-8CCRrL8DwoFIDcBifvB0YfZZV63vUjairLsBX/uuOSsFa3gPS1Or4bLm2llFojL091MINMPzwdzTgbIO5iDdKw==}
     dev: false
 
   /gensync@1.0.0-beta.2:
@@ -2908,7 +2908,7 @@ packages:
     peerDependencies:
       vue: ^3.2.26
     dependencies:
-      fullpage.js: 4.0.20
+      fullpage.js: 4.0.22
       vue: 3.4.14
     dev: false
 

src/assets/style/index.scss

@@ -700,7 +700,7 @@ body {
   top: 0;
   width: 100vw;
   height: 100vh;
-  background: url(/img/canvas/hua-2/0000.webp) no-repeat center/cover;
+  background: url(/img/canvas/hua-3/0000.webp) no-repeat center/cover;
   // background: url(/img/webp/ewm-bg.webp) no-repeat center/cover;
   z-index: 999;
   display: -webkit-box;

src/assets/style/section1.scss

@@ -14,6 +14,7 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
+  transform: translate3d(0, 0, 0);
   background: url(../img/webp/section1/bg.webp) no-repeat center/cover;
 }
 .section1 .logo,

src/components/fullpage/style.css

@@ -1,5 +1,5 @@
 /*!
- * fullPage 4.0.20
+ * fullPage 4.0.22
  * https://github.com/alvarotrigo/fullPage.js
  *
  * @license GPLv3 for open source use only

src/pages/section1.vue

@@ -35,7 +35,7 @@ const handler = ({ index: currentIndex, nextIndex }) => {
     player.enableScroll(1);
     if (pre === 1) {
       console.log("autoplay");
-      player.autoPlay(0, 60);
+      // player.autoPlay(0, 60);
     }
 
     isShowCanvas.value = true;
@@ -49,7 +49,7 @@ const process = ref(0);
 
 onMounted(() => {
   if (isMobile()) {
-    var vcon = new window.VConsole();
+    // var vcon = new window.VConsole();
   }
   emitter.on("onLeave", handler);
 
@@ -59,7 +59,7 @@ onMounted(() => {
       isShowCanvas.value = true;
       fullpage.value.api.setAllowScrolling(false);
       player.enableScroll(1);
-      player.autoPlay(0, 16);
+      // player.autoPlay(0, 16);
     }, 500);
     player.on("process", (p) => {
       process.value = p.process;
@@ -120,7 +120,7 @@ const onPlayerScroll = (event, type) => {
   line-height: 2;
   color: #997946;
   justify-content: center;
-  background: url(/img/canvas/hua-2/0000.webp) no-repeat center/cover;
+  background: url(/img/canvas/hua-3/0000.webp) no-repeat center/cover;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-box-align: center;

src/pages/section2.vue

@@ -50,7 +50,7 @@ const process = ref(0);
 
 onMounted(() => {
   if (isMobile()) {
-    var vcon = new window.VConsole();
+    // var vcon = new window.VConsole();
   }
   emitter.on("onLeave", handler);
 

src/pages/section3 copy.vue

@@ -86,7 +86,7 @@ const process = ref(0);
 
 onMounted(() => {
   if (isMobile()) {
-    var vcon = new window.VConsole();
+    // var vcon = new window.VConsole();
   }
   emitter.on("onLeave", handler);
 

src/pages/section3.vue

@@ -84,7 +84,7 @@ const process = ref(0);
 
 onMounted(() => {
   if (isMobile()) {
-    var vcon = new window.VConsole();
+    // var vcon = new window.VConsole();
   }
   emitter.on("onLeave", handler);
 

src/utils/canvasPlayer.js

@@ -98,9 +98,16 @@ export class CanvasPlayer extends Mitt {
         };
         this.clips.push(clip);
         for (let key = 0; key < item.total; key++) {
-          const padLength = item.total.toString().length + 1;
-          let imgIndex = String(key).padStart(padLength, "0");
+          let imgIndex;
+          // const padLength = item.total.toString().length;
+          if (key < 1000) {
+            imgIndex = String(key).padStart(4, "0");
+          } else {
+            imgIndex = key;
+          }
+
           let url = `${item.imageUrl}/${imgIndex}.webp`;
+          // console.log("url", url);
           const res = this.loadImage(url).then((image) => {
             if (image) {
               const frame = {
@@ -403,8 +410,7 @@ export class CanvasPlayer extends Mitt {
         const frameItem = this.frames.find(
           (item) => item.id == this.currentType && item.index == 1
         );
-        this.context.clearRect(0, 0, this.vw, this.vh);
-        this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
+        this.reDraw(this.currentFrame, this.currentType);
         this.initClipScrollheight();
         this.scrollAni = gsap.timeline();
         let doneScroll = () => {
@@ -443,29 +449,8 @@ export class CanvasPlayer extends Mitt {
     );
     if (frameItem && frameItem.index <= frameItem.total) {
       this.context.clearRect(0, 0, this.vw, this.vh);
-      if (isMobile()) {
-        // var hRatio = this.vw / this.imageW;
-        // var vRatio = this.vh / this.imageH;
-        // var ratio = Math.min(hRatio, vRatio);
-        // var centerShift_x = (this.vw - this.imageW * ratio) / 2;
-        // var centerShift_y = (this.vh - this.imageH * ratio) / 2;
-        // this.context.drawImage(
-        //   frameItem.image,
-        //   0,
-        //   0,
-        //   this.imageW,
-        //   this.imageH,
-        //   centerShift_x,
-        //   centerShift_y,
-        //   this.imageW * ratio,
-        //   this.imageH * ratio
-        // );
-
-        // var ratio =
-        //   frameItem.image.naturalWidth / frameItem.image.naturalHeight;
-        // var width = this.vw;
-        // var height = width / ratio;
 
+      if (isMobile()) {
         const { offsetX, offsetY, width, height } = cover(
           this.vw,
           this.vh,

src/view/index.vue

@@ -82,9 +82,9 @@ const setting = [
     name: "人鸟兽",
     sectionType: 1,
     canvasId: "canvas-section-1",
-    imageUrl: isMobile() ? "./img/canvas/hua-2" : "./img/canvas/hua-2",
+    imageUrl: isMobile() ? "./img/canvas/hua-3" : "./img/canvas/hua-3",
     // total: isMobile() ? 900 : 300,
-    total: isMobile() ? 403 : 403,
+    total: isMobile() ? 1432 : 1432,
   },
   // {
   //   name: "金蝉玉叶",