鼠标拖尾

更新: 11/17/2024 字数: 0 字时长: 0 分钟

TIP

此处文件已经过拆包，可查看文件结构一章
因为 VitePress 需要兼容SSR，这些代码有可能运行在node环境中，使用Dom的组件我们要动态导入

theme/Layout.vuetheme/src/fairyDustCursor.tstheme/src/index.ts

vue


<script setup lang="ts">
  import DefaultTheme from 'vitepress/theme';

  const {Layout} = DefaultTheme;
  import {useRouter} from "vitepress";

  const router = useRouter();

  // 鼠标拖尾、动态标题 start
  if (!import.meta.env.SSR) {
    import('./src').then(module => {
      module.dynamicTitle();
    });
  }
  // 鼠标拖尾、动态标题 end

  // Subscribe to route changes to re-apply medium zoom effect
  router.onAfterRouteChanged = () => {
    if (!import.meta.env.SSR) {
      import('./src').then(module => {
        module.dynamicTitle();
      });
    }
  };
</script>
<template>
  <Layout>
  </Layout>
</template>

export interface FiryDustCursorOptions {
  colors?: string[];
  element?: HTMLElement;
  canvasId?: string;
}

export function fairyDustCursor(options: FiryDustCursorOptions = {}) {
  const possibleColors = options.colors || ["#D61C59", "#E7D84B", "#1B8798"];
  const hasWrapperEl = !!options.element;
  const element = options.element || document.body;

  let width = window.innerWidth;
  let height = window.innerHeight;
  const cursor = { x: width / 2, y: width / 2 };
  const lastPos = { x: width / 2, y: width / 2 };
  const particles = [] as Particle[];
  const canvImages = [] as HTMLCanvasElement[];
  let canvas: HTMLCanvasElement;
  let context: CanvasRenderingContext2D;
  const canvasId = options.canvasId || "fairyDustCursor-canvas";

  const char = "*";

  function init() {
    if (isExist()) return;
    canvas = document.createElement("canvas");
    canvas.id = canvasId;
    canvas.style.zIndex = "99999";
    context = canvas.getContext("2d");
    canvas.style.top = "0px";
    canvas.style.left = "0px";
    canvas.style.pointerEvents = "none";

    if (hasWrapperEl) {
      canvas.style.position = "absolute";
      element.appendChild(canvas);
      canvas.width = element.clientWidth;
      canvas.height = element.clientHeight;
    } else {
      canvas.style.position = "fixed";
      element.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
    }

    context.font = "21px serif";
    context.textBaseline = "middle";
    context.textAlign = "center";

    for (const color of possibleColors) {
      const measurements = context.measureText(char);
      const bgCanvas = document.createElement("canvas");
      const bgContext = bgCanvas.getContext("2d");

      bgCanvas.width = measurements.width;
      bgCanvas.height =
        measurements.actualBoundingBoxAscent +
        measurements.actualBoundingBoxDescent;

      bgContext.fillStyle = color;
      bgContext.textAlign = "center";
      bgContext.font = "21px serif";
      bgContext.textBaseline = "middle";
      bgContext.fillText(
        char,
        bgCanvas.width / 2,
        measurements.actualBoundingBoxAscent
      );

      canvImages.push(bgCanvas);
    }

    bindEvents();
    loop();
  }

  // 检验是否绘制过
  function isExist(): boolean {
    const canvas = element.getElementsByTagName("canvas");
    for (const c in canvas) {
      if (canvas[c].id === canvasId) {
        return true;
      }
    }
    return false;
  }

  // Bind events that are needed
  function bindEvents() {
    element.addEventListener("mousemove", onMouseMove);
    element.addEventListener("touchmove", onTouchMove, { passive: true });
    element.addEventListener("touchstart", onTouchMove, { passive: true });
    window.addEventListener("resize", onWindowResize);
  }

  function onWindowResize() {
    width = window.innerWidth;
    height = window.innerHeight;

    if (hasWrapperEl) {
      canvas.width = element.clientWidth;
      canvas.height = element.clientHeight;
    } else {
      canvas.width = width;
      canvas.height = height;
    }
  }

  function onTouchMove(e: TouchEvent) {
    if (e.touches.length > 0) {
      for (let i = 0; i < e.touches.length; i++) {
        addParticle(
          e.touches[i].clientX,
          e.touches[i].clientY,
          canvImages[Math.floor(Math.random() * possibleColors.length)]
        );
      }
    }
  }

  function onMouseMove(e: MouseEvent) {
    window.requestAnimationFrame(() => {
      if (hasWrapperEl) {
        const boundingRect = element.getBoundingClientRect();
        cursor.x = e.clientX - boundingRect.left;
        cursor.y = e.clientY - boundingRect.top;
      } else {
        cursor.x = e.clientX;
        cursor.y = e.clientY;
      }

      const distBetweenPoints = Math.hypot(
        cursor.x - lastPos.x,
        cursor.y - lastPos.y
      );

      if (distBetweenPoints > 1.5) {
        addParticle(
          cursor.x,
          cursor.y,
          canvImages[Math.floor(Math.random() * possibleColors.length)]
        );

        lastPos.x = cursor.x;
        lastPos.y = cursor.y;
      }
    });
  }

  function addParticle(x: number, y: number, color: HTMLCanvasElement) {
    particles.push(new Particle(x, y, color));
  }

  function updateParticles() {
    context.clearRect(0, 0, width, height);

    // Update
    for (let i = 0; i < particles.length; i++) {
      particles[i].update(context);
    }

    // Remove dead particles
    for (let i = particles.length - 1; i >= 0; i--) {
      if (particles[i].lifeSpan < 0) {
        particles.splice(i, 1);
      }
    }
  }

  function loop() {
    updateParticles();
    requestAnimationFrame(loop);
  }

  init();
}

class Particle {
  initialLifeSpan: number;
  lifeSpan: number;
  velocity: { x: number; y: number };
  position: { x: number; y: number };
  canv: HTMLCanvasElement;

  constructor(x: number, y: number, canvasItem: HTMLCanvasElement) {
    const lifeSpan = Math.floor(Math.random() * 30 + 60);
    this.initialLifeSpan = lifeSpan; //
    this.lifeSpan = lifeSpan; //ms
    this.velocity = {
      x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
      y: Math.random() * 0.7 + 0.9,
    };
    this.position = { x: x, y: y };
    this.canv = canvasItem;
  }

  update(context: CanvasRenderingContext2D) {
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
    this.lifeSpan--;

    this.velocity.y += 0.02;

    const scale = Math.max(this.lifeSpan / this.initialLifeSpan, 0);

    context.drawImage(
      this.canv,
      this.position.x - (this.canv.width / 2) * scale,
      this.position.y - this.canv.height / 2,
      this.canv.width * scale,
      this.canv.height * scale
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214

export * from './fairyDustCursor';

鼠标拖尾 ​

鼠标拖尾