screenShow/src/modules/list/actions/canvas.ts

// import item from "@/pages/website/routes/list/item";
import { cloneDeep } from "lodash";
import ListModule from "..";
import { InitCanvasDragEvent, ListDraw } from "../objects/canvas";
import { ShowItem } from "../objects/item";

export default ListModule.action({
  async initListCanvasData(wWidth: number, wHeight: number) {
    const totalLines = this.store.animate.totalLines;
    const scrollType = this.store.animate.scrollType;
    const items = await this.actions.loadData();
    if (!items.length) {
      return;
    }
    const scale = Math.max(devicePixelRatio, 2);

    const canvas = {
      width: wWidth * scale,
      height: wHeight * scale,
      scale: scale,
      padding: this.store.animate.padding * scale,
      linesCount: Math.ceil(items.length / totalLines) * 2,
    };
    this.store.canvas = { ...this.store.canvas, ...canvas };

    if (scrollType == "vertical") {
      await this.actions.initVerticalList(items);
    }
    if (scrollType == "horizontal") {
      await this.actions.initHorizontalList(items);
    }
    return true;
  },
  async initVerticalList(items) {
    const totalLines = this.store.animate.totalLines;
    const canvas = cloneDeep(this.store.canvas);
    const itemOffset =
      (canvas.width - canvas.padding * (totalLines + 1)) / totalLines;
    this.store.canvas.itemOffset = itemOffset;
    const lines = [];
    for (let i = 0; i < totalLines; i++) {
      const off = i * canvas.linesCount;
      const arr: ShowItem[] = [];
      for (let k = 0; k < canvas.linesCount; k++) {
        arr.push(items[(off + k) % items.length]);
      }
      // this.actions.shuffleSelf(arr, totalLines);
      //计算总高度
      let halfOffset = 0;
      arr.forEach((item) => {
        const h = ((item.h * 1.0) / item.w) * itemOffset;
        item.offsetY = h + canvas.padding;
        halfOffset += item.offsetY;
      });
      let repeatArr: any = [];
      const times = Math.ceil((canvas.height * 2) / halfOffset);
      for (let i = 0; i < times; i++) {
        repeatArr = [...repeatArr, ...arr];
      }
      const linesItem = {
        items: repeatArr,
        offset: 0,
        halfOffset: halfOffset,
        dragging: false,
        speed: i % 2 == 0 ? 1 : 2,
      };
      lines.push(linesItem);
    }
    this.store.canvas.linesData = lines;
  },
  async initHorizontalList(items) {
    const totalLines = this.store.animate.totalLines;
    const canvas = cloneDeep(this.store.canvas);
    const itemOffset =
      (canvas.height - canvas.padding * (totalLines + 1)) / totalLines;
    this.store.canvas.itemOffset = itemOffset;
    const lines = [];
    for (let i = 0; i < totalLines; i++) {
      const off = i * totalLines;
      const arr: ShowItem[] = [];
      for (let k = 0; k < canvas.linesCount; k++) {
        arr.push(items[(off + k) % items.length]);
      }
      // this.actions.shuffleSelf(arr, canvas.linesCount);

      //计算总宽度
      let halfOffset = 0;
      arr.forEach((item) => {
        const w = ((item.w * 1.0) / item.h) * itemOffset;
        item.offsetX = w + canvas.padding;
        halfOffset += item.offsetX;
      });
      let repeatArr: any = [];
      const times = Math.ceil((canvas.width * 2) / halfOffset);
      for (let i = 0; i < times; i++) {
        repeatArr = [...repeatArr, ...arr];
      }
      const linesItem = {
        items: repeatArr,
        offset: 0,
        halfOffset: halfOffset,
        dragging: false,
        speed: i % 2 == 0 ? 1 : 2,
      };
      lines.push(linesItem);
    }
    this.store.canvas.linesData = lines;
  },
  async startListRunning(canvas: HTMLCanvasElement) {
    InitCanvasDragEvent.call(this, canvas);
    const storeCanvas = cloneDeep(this.store.canvas);
    canvas.width = storeCanvas.width;
    canvas.height = storeCanvas.height;

    const ctx = canvas.getContext("2d");

    const cacheCanvas = document.createElement("canvas");
    cacheCanvas.width = storeCanvas.width;
    cacheCanvas.height = storeCanvas.height;
    const cacheCtx = cacheCanvas.getContext("2d");
    if (!cacheCtx) {
      return;
    }
    cacheCtx.font = "24px sans-serif";
    cacheCtx.fillStyle = "#FFFFFF";
    cacheCtx.textBaseline = "top";

    let loopId = 0;

    let n = storeCanvas.linesData.length;
    let i = 0;
    let lastTime = Date.now();
    let dtaTime = 0;
    const loop = () => {
      dtaTime = Date.now() - lastTime;
      lastTime = Date.now();
      n = storeCanvas.linesData.length;
      while (n--) {
        const item = storeCanvas.linesData[n];
        if (!item.dragging) {
          //没有拖拽进行累积
          item.offset = Math.floor(item.offset + item.speed);
        }
        //   console.log(item.offset);
        if (item.offset >= item.halfOffset) item.offset -= item.halfOffset;
        if (item.offset < 0) item.offset += item.halfOffset;
        this.store.canvas.linesData[n] = item;
      }

      cacheCtx?.clearRect(0, 0, storeCanvas.width, storeCanvas.height);
      n = storeCanvas.linesData.length;
      for (i = 0; i < n; i++) {
        ListDraw.call(this, storeCanvas.linesData[i], i, cacheCtx);
      }
      ctx?.clearRect(0, 0, storeCanvas.width, storeCanvas.height);
      ctx?.drawImage(cacheCanvas, 0, 0);
      loopId = requestAnimationFrame(loop);
    };
    loop();
  },
});