feat: 保存

src/components/fullpage/fullpage.vue

@@ -7,9 +7,7 @@
 <script>
 import "./style.css";
 
-// import 'fullpage.js/dist/fullpage.min.css'
 import fullpage from "fullPage";
-// import fullpage from 'fullpage.js/dist/fullpage.extensions.min.js'
 import * as constants from "./constants.js";
 
 export default {

src/components/imgLoading.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section-loading" v-if="progress > 100">
+  <div class="section section-loading" v-if="progress < 100">
     <div class="section1-wwbox">
       <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn" />
       <div class="title2 fadeIn"></div>

src/components/navGuide.vue

@@ -77,7 +77,7 @@ onUnmounted(() => {
 
 const handleSlideTo = (index) => {
   if (props.fullpage) {
-    console.log("moveTO", index);
+    // console.log("moveTO", index);
     props.fullpage.api.moveTo(index);
   }
 };

src/hooks/usecanvasPlayer.js

@@ -0,0 +1,12 @@
+import { CanvasPlayer } from "../utils/canvasPlayer.js";
+let currentPlayer = null;
+export const useCanvasPlayer = function (setting) {
+  if (!currentPlayer) {
+    currentPlayer = new CanvasPlayer(setting);
+    window.player = currentPlayer;
+  }
+  return currentPlayer;
+};
+export const usePlayer = function () {
+  return currentPlayer;
+};

src/pages/section14-set.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="section section14">
+    <canvas
+      class="canvas"
+      id="canvas-section-14"
+      v-show="isShowCanvas"
+    ></canvas>
+    <process-bar :process="process" />
+    <div class="can-scroll scroll-bar-14" @scroll="onPlayerScroll($event, 14)">
+      <div
+        style="width: 100%; height: 14000px"
+        class="scroll-bar-14-placeholder"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, unref } from "vue";
+import processBar from "../components/processBar.vue";
+import { emitter } from "../emitter.js";
+import { usePlayer } from "../hooks/usecanvasPlayer.js";
+import { isMobile } from "../utils/isMoblie";
+
+const props = defineProps({
+  fullpage: Object,
+});
+
+const isShowCanvas = ref(false);
+
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  const { index: pre } = currentIndex;
+  const player = usePlayer();
+  if (index === 13) {
+    props.fullpage.api.setAllowScrolling(false);
+    player.enableScroll(14);
+    if (pre === 12) {
+      console.log("autoplay");
+      player.autoPlay(0, 60);
+    }
+    isShowCanvas.value = true;
+  } else {
+    player.unEnableScroll();
+    isShowCanvas.value = false;
+    props.fullpage.api.setAllowScrolling(true);
+  }
+};
+const process = ref(0);
+
+onMounted(() => {
+  emitter.on("onLeave", handler);
+
+  emitter.on("loaded", () => {
+    const player = usePlayer();
+    player.on("process", (p) => {
+      process.value = p.process;
+    });
+    player.on("scroll-prev", () => {
+      console.warn("scroll-prev");
+      props.fullpage.api.moveSectionUp();
+    });
+    player.on("scroll-next", () => {
+      console.warn("scroll-next");
+      props.fullpage.api.moveSectionDown();
+    });
+  });
+});
+onUnmounted(() => {
+  emitter.off("onLeave", handler);
+});
+const onPlayerScroll = (event, type) => {
+  const player = usePlayer();
+  player.manualScroll(event, type);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.scss";
+
+.canvas {
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.can-scroll {
+  // background: white;
+  width: 100%;
+  overflow-y: scroll;
+  position: relative;
+  overflow-x: hidden;
+  z-index: 10;
+}
+.section {
+  position: relative;
+}
+.section14 {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  line-height: 2;
+  color: #997946;
+  justify-content: center;
+  background: url(/img/section2/bg.webp) no-repeat center/cover;
+}
+</style>

src/pages/section14.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section section14 chapter" >
+  <div class="section section14 chapter">
     <div class="box">
       <div class="chapter-num">第二章</div>
       <div class="chapter-title">玉成中国</div>
@@ -15,7 +15,24 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { emitter } from "../emitter.js";
+const props = defineProps({
+  fullpage: Object,
+});
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  const { index: pre } = currentIndex;
+  if (index === 13) {
+    console.log("hey");
+  }
+  if (pre === 12) {
+    console.log("order");
+  }
+};
+
+emitter.on("onLeave", handler);
+</script>
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";

src/pages/section3 copy.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="section section3">
+    <canvas class="canvas" id="canvas-section-3" v-show="isShowCanvas"></canvas>
+    <process-bar :process="process" />
+    <div
+      class="can-scroll scroll-bar-3"
+      @scroll.capture="onPlayerScroll($event, 3)"
+    >
+      <div
+        style="width: 100%; height: 14000px"
+        class="scroll-bar-3-placeholder"
+      ></div>
+      <!-- <div class="wwmap hide active" id="videocont-map">
+        <img src="/img/map/map-rnsys.webp" alt="" />
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide active" id="videocont1-1">
+        <div class="wwtitle">人鸟兽玉饰</div>
+        <div class="wwintro">
+          原本湖绿色<b>玉质</b>在埋藏千年后<br />已焕发出带有<b>柔和光泽</b>的<br /><b
+            >白色斑纹</b
+          >。
+        </div>
+      </div>
+      <div class="wwinfobox hide active" id="videocont1-2">
+        <div class="wwinfo">良渚文化早期</div>
+        <div class="wwinfo">南京博物院藏</div>
+        <div class="wwinfo">
+          端饰长5.5厘米，宽1.3厘米，厚0.2厘米-0.4厘米，孔径0.3厘米
+        </div>
+        <div class="wwinfo">1991年江苏省昆山市赵陵山遗址出土</div>
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-3">
+        <div class="wwtitle2">飞鸟</div>
+        <div class="wwintro3">
+          飞鸟悠闲驻足于一位跪状显贵者长长的发冠上；鸟的身下，人双手举托起的四足短尾小兽奋力向上攀爬。鸟，遨游云端，上下翻飞，先民深信它们是通天的生灵；
+        </div>
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-4">
+        <div class="wwtitle2">兽</div>
+        <div class="wwintro3">兽，奔跑原野，下穿三泉，是大地的主人；</div>
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-5">
+        <div class="wwtitle2">人</div>
+        <div class="wwintro3">
+          人，立于天地之间，与生俱来地拥有智慧而承担起沟通天地的桥梁。
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, unref } from "vue";
+import processBar from "../components/processBar.vue";
+import { emitter } from "../emitter.js";
+import { usePlayer } from "../hooks/usecanvasPlayer.js";
+import { isMobile } from "../utils/isMoblie";
+
+const props = defineProps({
+  fullpage: Object,
+});
+
+const isShowCanvas = ref(false);
+
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  const { index: pre } = currentIndex;
+  const player = usePlayer();
+  if (index === 2) {
+    // console.log("currentIndex", currentIndex);
+    props.fullpage.api.setAllowScrolling(false);
+    player.enableScroll(3);
+    if (pre === 1) {
+      console.log("autoplay");
+      player.autoPlay(0, 60);
+    }
+
+    isShowCanvas.value = true;
+  } else {
+    player.unEnableScroll();
+    isShowCanvas.value = false;
+    props.fullpage.api.setAllowScrolling(true);
+  }
+};
+const process = ref(0);
+
+onMounted(() => {
+  if (isMobile()) {
+    var vcon = new window.VConsole();
+  }
+  emitter.on("onLeave", handler);
+
+  emitter.on("loaded", () => {
+    const player = usePlayer();
+    player.on("process", (p) => {
+      process.value = p.process;
+    });
+    player.on("scroll-prev", () => {
+      console.warn("scroll-prev");
+      props.fullpage.api.moveSectionUp();
+    });
+    player.on("scroll-next", () => {
+      console.warn("scroll-next");
+      props.fullpage.api.moveSectionDown();
+    });
+  });
+
+  // player.on("loaded", () => {
+  //   console.log("所有图片完成");
+  // });
+  // player.on("loadPress", (p) => {
+  //   // console.log(`加载`, p);
+  //   emitter.emit("updatePress", p);
+  // });
+});
+onUnmounted(() => {
+  emitter.off("onLeave", handler);
+});
+const onPlayerScroll = (event, type) => {
+  // console.log("onPlayerScroll");
+  player.manualScroll(event, type);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.scss";
+
+.canvas {
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.can-scroll {
+  // background: white;
+  width: 100%;
+  overflow-y: scroll;
+  position: relative;
+  overflow-x: hidden;
+  z-index: 10;
+}
+.section {
+  position: relative;
+}
+.section3 {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  line-height: 2;
+  color: #997946;
+  justify-content: center;
+  background: url(/img/section2/bg.webp) no-repeat center/cover;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  .wwmap {
+    position: absolute;
+    top: 5vh !important;
+    right: 5vw;
+    left: auto;
+    width: auto !important;
+    text-align: right;
+  }
+}
+</style>

src/pages/section3.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="section section3" >
-    <canvas id="canvas" v-show="isShowCanvas"></canvas>
+  <div class="section section3">
+    <canvas class="canvas" id="canvas-section-3" v-show="isShowCanvas"></canvas>
     <process-bar :process="process" />
     <div
       class="can-scroll scroll-bar-3"
@@ -51,84 +51,31 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, unref } from "vue";
 import processBar from "../components/processBar.vue";
 import { emitter } from "../emitter.js";
-import { CanvasPlayer } from "../utils/canvasPlayer.js";
+import { usePlayer } from "../hooks/usecanvasPlayer.js";
 import { isMobile } from "../utils/isMoblie";
-const setting = [
-  {
-    name: "人鸟兽",
-    sectionType: 3,
-    className: ["canvas", ".scroll-container", ".section3 .fp-scrollable"],
-    canvas: null,
-    context: null,
-    imageUrl: isMobile() ? "./img/canvas/pc1_mo" : "./img/canvas/pc1",
-    dots: [],
-    // total: isMobile() ? 900 : 300,
-    total: isMobile() ? 900 : 331,
-  },
-  // {
-  //   name: "金蝉玉叶",
-  //   sectionType: 54,
-  //   className: ["canvas1", ".scroll-container1", ".jinchanyuye .fp-scrollable"],
-  //   canvas: null,
-  //   context: null,
-  //   imageUrl: "./img/canvas/jcyy",
-  //   dots: [],
-  //   total: 288,
-  //   CA: [
-  //     {
-  //       name: "#videocont2-1",
-  //       start: 74,
-  //       end: 116,
-  //     },
-  //     {
-  //       name: "#videocont2-map",
-  //       start: 74,
-  //       end: 116,
-  //     },
-  //     {
-  //       name: "#videocont2-2",
-  //       start: 84,
-  //       end: 116,
-  //     },
-  //     {
-  //       name: "#videocont2-3",
-  //       start: 84,
-  //       end: 116,
-  //     },
-  //     {
-  //       name: "#videocont2-4",
-  //       start: 120,
-  //       end: 181,
-  //     },
-  //     {
-  //       name: "#videocont2-5",
-  //       start: 194,
-  //       end: 242,
-  //     },
-  //   ],
-  // },
-];
 
 const props = defineProps({
   fullpage: Object,
 });
 
-const player = new CanvasPlayer("canvas", setting);
-
+// const player = new CanvasPlayer("canvas", setting);
+// const player = useCanvasPlayer("canvas", setting);
+// console.log("player", player);
 const isShowCanvas = ref(false);
 
 const handler = ({ index: currentIndex, nextIndex }) => {
   const { index } = nextIndex;
   const { index: pre } = currentIndex;
+  const player = usePlayer();
   if (index === 2) {
     // console.log("currentIndex", currentIndex);
     props.fullpage.api.setAllowScrolling(false);
     player.enableScroll(3);
-
     if (pre === 1) {
+      console.log("autoplay");
       player.autoPlay(0, 60);
     }
 
@@ -145,41 +92,37 @@ onMounted(() => {
   if (isMobile()) {
     var vcon = new window.VConsole();
   }
-
   emitter.on("onLeave", handler);
-  player.init();
-  player.on("loaded", () => {
-    console.log("所有图片完成");
-  });
-  player.on("loadPress", (p) => {
-    // console.log(`加载`, p);
-    emitter.emit("updatePress", p);
-  });
-  player.on("process", (p) => {
-    // console.log("process", p);
-    process.value = p.process;
-  });
-  let timer;
-  player.on("scroll-prev", () => {
-    console.warn("scroll-prev");
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
+
+  emitter.on("loaded", () => {
+    const player = usePlayer();
+    player.on("process", (p) => {
+      process.value = p.process;
+    });
+    player.on("scroll-prev", () => {
+      console.warn("scroll-prev");
       props.fullpage.api.moveSectionUp();
-    }, 600);
-  });
-  player.on("scroll-next", () => {
-    console.warn("scroll-next");
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
+    });
+    player.on("scroll-next", () => {
+      console.warn("scroll-next");
       props.fullpage.api.moveSectionDown();
-    }, 600);
+    });
   });
-  window.player = player;
+
+  // player.on("loaded", () => {
+  //   console.log("所有图片完成");
+  // });
+  // player.on("loadPress", (p) => {
+  //   // console.log(`加载`, p);
+  //   emitter.emit("updatePress", p);
+  // });
 });
 onUnmounted(() => {
   emitter.off("onLeave", handler);
 });
 const onPlayerScroll = (event, type) => {
+  // console.log("onPlayerScroll");
+  const player = usePlayer();
   player.manualScroll(event, type);
 };
 </script>
@@ -187,7 +130,7 @@ const onPlayerScroll = (event, type) => {
 <style lang="scss" scoped>
 @import "/src/assets/style/index.scss";
 
-#canvas {
+.canvas {
   position: absolute;
   top: 0;
   z-index: 0;

src/utils/canvasPlayer.js

@@ -8,10 +8,10 @@ class Mitt {
   }
 }
 export class CanvasPlayer extends Mitt {
-  constructor(canvasId, setting) {
+  constructor(setting) {
     super();
     this.canvas = null;
-    this.canvasId = canvasId;
+    this.canvasId = null;
     this.context = null;
     this.vw = null;
     this.vh = null;
@@ -38,7 +38,17 @@ export class CanvasPlayer extends Mitt {
     this.resize = this.resize.bind(this);
     this.watchScroll = this.watchScroll.bind(this);
   }
-  init() {
+  mount() {
+    this.proload();
+  }
+  enable(currentType) {
+    if (!currentType) {
+      console.error("sectionId 缺少!");
+      return;
+    }
+  }
+  setCanvas(canvasId) {
+    this.canvasId = canvasId;
     this.canvas = document.getElementById(this.canvasId);
     this.context = this.canvas.getContext("2d", {
       alpha: true,
@@ -49,11 +59,8 @@ export class CanvasPlayer extends Mitt {
     this.vh = this.canvas.height = window.innerHeight;
     this.imageW = isMobile() ? 750 : 1920;
     this.imageH = isMobile() ? 1334 : 1080;
-    this.proload();
-    this.initClipAnimate();
     this.loadEvent();
   }
-
   loadImage(url) {
     return new Promise((resolve, reject) => {
       const img = new Image(this.imageW, this.imageH);
@@ -75,11 +82,16 @@ export class CanvasPlayer extends Mitt {
         0
       );
       Array.from(this.setting).forEach((item, framekey) => {
+        // 当前canvas 取列表第一个
+        if (framekey == 0 && !this.canvasId) {
+          this.setCanvas(item.canvasId);
+        }
         const base = [];
         const clip = {
           id: item.sectionType,
           total: item.total,
           x: 0,
+          canvasId: item.canvasId,
           animation: null,
         };
         this.clips.push(clip);
@@ -111,6 +123,7 @@ export class CanvasPlayer extends Mitt {
         console.warn("all load");
         this.emit("loadPress", 100);
         this.emit("loaded");
+        this.initClipAnimate();
       });
     }
   }
@@ -130,9 +143,16 @@ export class CanvasPlayer extends Mitt {
     }
   }
   enableScroll(type = 0) {
-    this.canScroll = true;
-    this.currentType = type;
-    this.initFirstFrame();
+    if (type > 0) {
+      this.canScroll = true;
+      this.currentType = type;
+      const clip = Array.from(this.clips).find(
+        (item) => item.id === this.currentType
+      );
+      this.unLoadEvent();
+      this.setCanvas(clip.canvasId);
+      this.initFirstFrame();
+    }
   }
   unEnableScroll() {
     this.canScroll = false;
@@ -207,7 +227,6 @@ export class CanvasPlayer extends Mitt {
         onUpdate: () => {
           this.isRendering = true;
           const mFrame = Math.floor(this.movingFrame);
-          // console.log("mFrame", mFrame);
           const prcess = mFrame / clip.total;
           this.reDraw(mFrame, this.currentType);
           this.noticeProcess();

src/view/index.vue

@@ -1,7 +1,7 @@
 <template>
   <mouse-tips />
   <nav-guide :fullpage="fullpage" />
-  <loadImg v-if="progress != 100" @changePer="changePre" :fullpage="fullpage" />
+  <loadImg :fullpage="fullpage" />
   <section1 />
   <section2 />
   <section3 :fullpage="fullpage" />
@@ -15,7 +15,7 @@
   <section11 />
   <section12 />
   <section13 />
-  <section14 />
+  <section14 :fullpage="fullpage" />
   <section15 />
   <section16 />
   <section17 />
@@ -35,10 +35,10 @@
   <section31 />
 </template>
 <script setup>
-import { ref } from "vue";
-import loadImg from '../components/imgLoading.vue';
+import loadImg from "../components/imgLoading.vue";
 import mouseTips from "../components/mouseTips.vue";
 import navGuide from "../components/navGuide.vue";
+
 import Section1 from "../pages/section1.vue";
 import Section2 from "../pages/section2.vue";
 import Section3 from "../pages/section3.vue";
@@ -70,14 +70,48 @@ import Section28 from "../pages/section28.vue";
 import Section29 from "../pages/section29.vue";
 import Section30 from "../pages/section30.vue";
 import Section31 from "../pages/section31.vue";
+
+import { onMounted, ref } from "vue";
+import { useCanvasPlayer } from "../hooks/usecanvasPlayer";
+import { emitter } from "../emitter.js";
+import { isMobile } from "../utils/isMoblie";
+
+const setting = [
+  {
+    name: "人鸟兽",
+    sectionType: 3,
+    canvasId: "canvas-section-3",
+    imageUrl: isMobile() ? "./img/canvas/pc1_mo" : "./img/canvas/pc1",
+    // total: isMobile() ? 900 : 300,
+    total: isMobile() ? 900 : 331,
+  },
+  {
+    name: "金蝉玉叶",
+    canvasId: "canvas-section-14",
+    sectionType: 14,
+    imageUrl: "./img/canvas/jcyy",
+    dots: [],
+    total: 288,
+  },
+];
+
 defineOptions({
   name: "View",
 });
 const props = defineProps({
   fullpage: Object,
 });
-const progress = ref(0);
-function changePre(val) {
-  progress.value = val
-}
+
+const player = useCanvasPlayer(setting);
+
+onMounted(() => {
+  player.mount();
+  player.on("loaded", () => {
+    console.log("所有图片完成");
+    emitter.emit("loaded");
+  });
+  player.on("loadPress", (p) => {
+    emitter.emit("updatePress", p);
+  });
+});
 </script>