初次提交

2026-09-06 08:19:02 +08:00
commit 4ce4649aaf
1061 changed files with 337258 additions and 0 deletions
@@ -0,0 +1,89 @@
+import {
+	type TextLayoutConfig,
+	layoutWord,
+} from "./lyric-player/canvas/text-layout";
+
+const canvas = document.createElement("canvas");
+canvas.width = 600 * devicePixelRatio;
+canvas.height = 400 * devicePixelRatio;
+canvas.style.border = "1px solid black";
+canvas.style.width = "600px";
+canvas.style.height = "400px";
+document.body.appendChild(canvas);
+
+const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+const textInput = document.createElement("input");
+const fontSizeInput = document.createElement("input");
+const config: TextLayoutConfig = Object.seal({
+	fontSize: 60,
+	maxWidth: 400,
+	lineHeight: 1.2,
+	uniformSpace: true,
+});
+function redraw() {
+	ctx.resetTransform();
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+	config.fontSize = fontSizeInput.valueAsNumber;
+
+	ctx.font = `${config.fontSize}px sans-serif`;
+	ctx.fillStyle = "black";
+	ctx.strokeStyle = "red";
+	ctx.scale(devicePixelRatio, devicePixelRatio);
+	ctx.translate(100, 100);
+
+	ctx.strokeRect(0, -config.fontSize - 5, config.maxWidth, 1);
+	const start = performance.now();
+	for (const wordLayout of layoutWord(ctx, textInput.value, config)) {
+		ctx.filter = "none";
+		ctx.strokeRect(
+			wordLayout.x,
+			wordLayout.lineIndex * (config.fontSize * config.lineHeight) -
+				config.fontSize,
+			wordLayout.width,
+			config.fontSize,
+		);
+		if (wordLayout.lineIndex > 0)
+			ctx.filter = `blur(${wordLayout.lineIndex}px)`;
+		ctx.fillText(
+			wordLayout.text,
+			wordLayout.x,
+			wordLayout.lineIndex * (config.fontSize * config.lineHeight),
+		);
+	}
+	console.log(performance.now() - start);
+}
+
+textInput.type = "text";
+textInput.placeholder = "输入文字";
+textInput.style.width = "100%";
+textInput.style.padding = "5px";
+textInput.style.boxSizing = "border-box";
+textInput.value =
+	"Hello, World! AWAY! 你好世界！Lyric Test Test 你好世界！你好世界！タンタン \\(°▽ ° )";
+textInput.addEventListener("input", () => {
+	redraw();
+});
+document.body.appendChild(textInput);
+
+fontSizeInput.type = "number";
+fontSizeInput.placeholder = "字体大小";
+fontSizeInput.style.width = "100%";
+fontSizeInput.style.padding = "5px";
+fontSizeInput.style.boxSizing = "border-box";
+fontSizeInput.valueAsNumber = 40;
+fontSizeInput.addEventListener("input", () => {
+	redraw();
+});
+document.body.appendChild(fontSizeInput);
+
+addEventListener(
+	"load",
+	() => {
+		redraw();
+	},
+	{
+		once: true,
+	},
+);