hanzi-writer を用いたサンプルを追加した

0918nobita · May 10, 2024 · f0fd8fa · f0fd8fa
1 parent 37aecfe
commit f0fd8fa
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="utf-8">
+        <title>Playground</title>
+    </head>
+    <body>
+        <script type="module" src="src/playground.ts"></script>
+    </body>
+</html>
diff --git a/src/playground.ts b/src/playground.ts
@@ -0,0 +1,33 @@
+import { type HanziWriterOptions, default as HW } from 'hanzi-writer';
+
+const hwOptions: Partial<HanziWriterOptions> = {
+    width: 100,
+    height: 100,
+    padding: 5,
+    strokeColor: '#000000',
+    radicalColor: '#EE00FF',
+    showOutline: true,
+    strokeAnimationSpeed: 2,
+    delayBetweenStrokes: 10,
+    showCharacter: false,
+};
+
+const c1Writer = HW.create(document.body, '讨', hwOptions);
+
+const c2Writer = HW.create(document.body, '论', hwOptions);
+
+const btn = document.createElement('button');
+btn.textContent = 'Animate';
+document.body.appendChild(btn);
+
+btn.addEventListener('click', async () => {
+    await Promise.all([c1Writer.hideCharacter(), c2Writer.hideCharacter()]);
+
+    const delayBetweenAnimations = 500;
+
+    await c1Writer.animateCharacter();
+
+    await new Promise((resolve) => setTimeout(resolve, delayBetweenAnimations));
+
+    await c2Writer.animateCharacter();
+});