-
-
Notifications
You must be signed in to change notification settings - Fork 799
/
Utils.ts
83 lines (68 loc) · 1.86 KB
/
Utils.ts
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
import { type IShapeDrawData, itemFromSingleOrMultiple } from "@tsparticles/engine";
import type { ITextShape } from "./ITextShape.js";
import type { TextParticle } from "./TextParticle.js";
const double = 2,
half = 0.5;
/**
*
* @param data -
*/
export function drawText(data: IShapeDrawData<TextParticle>): void {
const { context, particle, radius, opacity } = data,
character = particle.shapeData as ITextShape | undefined;
if (!character) {
return;
}
const textData = character.value;
if (textData === undefined) {
return;
}
if (particle.text === undefined) {
particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
}
const text = particle.text,
style = character.style ?? "",
weight = character.weight ?? "400",
size = Math.round(radius) * double,
font = character.font ?? "Verdana",
fill = particle.shapeFill;
const lines = text?.split("\n");
if (!lines) {
return;
}
context.font = `${style} ${weight} ${size}px "${font}"`;
context.globalAlpha = opacity;
for (let i = 0; i < lines.length; i++) {
drawLine(context, lines[i], radius, opacity, i, fill);
}
context.globalAlpha = 1;
}
/**
*
* @param context -
* @param line -
* @param radius -
* @param opacity -
* @param index -
* @param fill -
*/
function drawLine(
context: CanvasRenderingContext2D,
line: string,
radius: number,
opacity: number,
index: number,
fill: boolean,
): void {
const offsetX = line.length * radius * half,
pos = {
x: -offsetX,
y: radius * half,
},
diameter = radius * double;
if (fill) {
context.fillText(line, pos.x, pos.y + diameter * index);
} else {
context.strokeText(line, pos.x, pos.y + diameter * index);
}
}