Tegaki

Tegaki（日语“手書き”，意为手写）是一款创新的 JavaScript 库，它能将任何标准字体实时转换为逐笔绘制的手写动画效果。无需手动绘制 SVG 路径，无需复杂的原生依赖，只需引入字体，即可让文字在屏幕上像被真实书写一样自然呈现。

目前主要支持英文字符，适用于 React, Vue, Svelte, SolidJS, Astro 及原生 JS 等多种环境。

核心亮点

1. 零配置手写动画

• 自动路径生成：摒弃了传统手写动画需要手动描摹 SVG 路径的痛苦过程。Tegaki 通过算法分析字体轮廓，自动生成笔画顺序和绘制轨迹。
• 自然时序：模拟真实书写的节奏，包括起笔、运笔和收笔的微小停顿，视觉效果极其逼真。

2. 极简集成，多框架支持

• 开箱即用：提供针对主流前端框架的专用组件封装，API 高度一致。
• 轻量无依赖：核心引擎纯 JS 实现，不依赖重型图形库，打包体积极小。

3. 内置精美手写字体

内置四种高质量手写风格字体，无需额外配置即可使用：

• Caveat: 自然随意的日常手写体。
• Italianno: 优雅流畅的意大利斜体。
• Tangerine: 经典正式的书法风格。
• Parisienne: 浪漫精致的法式手写体。

4. 自定义字体支持

对于内置字体之外的需求，Tegaki 提供了交互式生成器，允许用户上传或选择其他字体，生成专用的数据包，从而实现“任意字体手写化”。

快速开始

1. 安装

npm install tegaki

2. React 示例

import { TegakiRenderer } from 'tegaki';
import caveat from 'tegaki/fonts/caveat'; // 导入内置字体数据

function App() {
  return (
    <div style={{ padding: '50px' }}>
      <TegakiRenderer 
        font={caveat} 
        style={{ fontSize: '48px', color: '#333' }}
        duration={2000} // 可选：控制动画时长（毫秒）
      >
        Hello World
      </TegakiRenderer>
    </div>
  );
}

3. 其他框架支持

Vue:

<script setup>
import { TegakiRenderer } from 'tegaki/vue';
import italianno from 'tegaki/fonts/italianno';
</script>

<template>
  <TegakiRenderer :font="italianno" style="font-size: 48px;">
    Bonjour
  </TegakiRenderer>
</template>

Svelte:

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import tangerine from 'tegaki/fonts/tangerine';
</script>

<TegakiRenderer font={tangerine} style="font-size: 48px;">
  Welcome
</TegakiRenderer>

Vanilla JS:

import { TegakiEngine } from 'tegaki/core';
import parisienne from 'tegaki/fonts/parisienne';

const engine = new TegakiEngine({
  element: document.getElementById('container'),
  font: parisienne,
  text: 'Creative Coding',
  style: { fontSize: '48px' }
});

engine.start();

API 简要说明

应用场景

• 个性化问候卡片：在网站节日贺卡或生日祝福中增加温情。
• 教育类应用：展示字母或单词的正确书写笔顺。
• 品牌 Logo 演绎：为品牌名称添加独特的手写登场效果。
• 创意作品集：设计师或艺术家网站中展示签名或标题。

未来展望

• 多语言支持：目前仅支持英文，未来计划扩展至中文、日文等复杂字符集（需解决笔画拆解难题）。
• 更多内置字体：社区贡献更多风格的手写字体包。
• 性能优化：进一步提升长文本渲染效率。