From 6c4cf1ee6480d74c7cd9b61bcdbc52945eafba64 Mon Sep 17 00:00:00 2001 From: Wynn Date: Tue, 18 Aug 2026 20:18:50 +0800 Subject: [PATCH] Add phrase presets --- README.md | 2 ++ app.js | 7 +++++++ index.html | 5 +++++ styles.css | 2 ++ 4 files changed, 16 insertions(+) diff --git a/README.md b/README.md index 390f070..d018167 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ InkTime 是一个英文手写动画生成器，用来解决制作简单签名式 - 将英文短句渲染为逐笔书写的 SVG 动画。 - 调整墨水颜色、字号、书写时长和对齐方式。 +- 提供三条常用英文短句预设，点击即可生成。 - 一键重新播放动画。 - 将当前结果导出为 SVG。 - 输入校验会提示当前内置笔迹不支持的字符。 @@ -26,6 +27,7 @@ python3 -m http.server 8000 ## 使用方法 1. 输入不超过 70 个字符的英文短句。 + 也可以点击输入框下方的短句预设快速体验。 2. 设置颜色、字号、时长和对齐方式。 3. 点击“生成动画”。 4. 点击“重新播放”查看效果，或点击“导出 SVG”下载结果。 diff --git a/app.js b/app.js index e26cdb0..c05840c 100644 --- a/app.js +++ b/app.js @@ -56,6 +56,13 @@ document.querySelector('#controls').addEventListener('submit', event => { generate(); }); +document.querySelectorAll('[data-phrase]').forEach(button => { + button.addEventListener('click', () => { + document.querySelector('#text-input').value = button.dataset.phrase; + generate(); + }); +}); + document.querySelector('#replay-button').addEventListener('click', () => { if (!currentVara) return generate(); currentVara.draw('message'); diff --git a/index.html b/index.html index 0597922..ce67c44 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,11 @@

让一句话
慢慢写出来。

文字内容 当前内置笔迹支持英文字母、数字和常用英文标点。 +
+ + + +