Rough Notation翻译站点

产品定位

RoughNotation 是一个轻量级 JavaScript 注解库，专注于在网页上生成并动画化手绘风格的标记效果。它不依赖任何框架，体积控制在数 KB 级别，适合嵌入各类 Web 项目中使用。

核心功能

内置注解类型

该库提供六种基础注解形态，覆盖常见的内容强调场景：

动画控制

所有注解均支持入场动画，可通过配置项调整动画时长、延迟时间和缓动效果。动画基于 SVG 路径的描边模拟手写过程，视觉上接近真实笔触的生成节奏。

样式定制

用户可自定义线条颜色、粗细、填充色、边距等视觉参数，也可关闭手绘抖动效果，获得规整的几何线条。样式配置以对象形式传入，与主流前端开发习惯一致。

技术特点

• 零依赖：不引入任何第三方库，减少项目依赖负担
• 框架无关：核心实现基于原生 DOM 与 SVG，可直接用于 React、Vue、Svelte 等框架，也可在无框架页面中独立运行
• TypeScript 支持：类型定义随包提供，便于在 TS 项目中获得完整的类型提示
• 按需实例化：每个注解对象独立管理生命周期，支持单个创建、显示与移除

基本用法

import { annotate } from 'rough-notation';

const annotation = annotate(document.querySelector('#target'), {
  type: 'underline',
  color: '#e74c3c',
  strokeWidth: 2,
  padding: 4,
});

annotation.show();

annotate 函数接收目标元素和配置对象，返回注解实例。调用 show() 触发动画，hide() 可反向播放动画移除注解。

适用场景

该库适合用于：

• 文章或教程中的重点内容标注
• 演示文稿式页面的逐步揭示效果
• 交互式学习材料中的即时反馈标记
• 需要强调页面元素但避免生硬 UI 样式的场景

由于注解以 SVG 绝对定位层叠在目标元素上方，需注意目标元素的位置属性与页面滚动时的坐标同步。对于高频动态变化的布局，建议在每次显示前重新计算位置或重建注解实例。