使用 Rough Notation 创建手绘风格的文本注释

在现代网页设计中，文本注释和高亮是提升内容可读性和视觉吸引力的重要手段。传统的文本高亮通常是规整的矩形色块，而 Rough Notation 库为我们带来了一种全新的手绘风格注释方式。

什么是 Rough Notation？

Rough Notation 是一个轻量级的 JavaScript 库，它可以在网页上创建手绘风格的文本注释。与传统的精确几何图形不同，Rough Notation 使用不规则的线条和形状，模拟真实手绘的效果，让你的网页内容更加生动有趣。

支持的注释类型

Rough Notation 提供了多种注释样式，可以满足不同场景的需求：

Underline（下划线）

在文本下方绘制一条不规则的下划线，适合强调关键词。

示例：这段文字带有下划线

Box（方框）

用方框包围文本，适合突出重要内容或引用。

示例：这段文字被方框包围

Circle（圆圈）

用圆圈包围文本，适合标记重点或需要特别注意的内容。

示例：这段文字被圆圈标记

Highlight（高亮）

类似于荧光笔的效果，在文本下方添加高亮背景。

示例：这段文字被高亮显示

Strike-through（删除线）

在文本中间绘制一条穿过线，表示删除或不再适用的内容。

示例：这段文字已删除

Crossed-off（划掉）

用 X 形标记划掉文本，比删除线更加醒目。

示例：这段文字被划掉

Bracket（括号）

在文本两侧添加括号，适合注释或补充说明。

示例：这段文字带有括号注释

在 Astro 项目中使用

为了方便在 Astro 项目中使用 Rough Notation，我创建了一个封装好的 Notation 组件。

基本用法

---
import Notation from '../components/Notation.astro';
---

<Notation type="highlight" color="#fef08a">这段文本会被高亮显示</Notation>

自定义参数

组件支持丰富的自定义参数：

<Notation
    type="box"
    color="#ef4444"
    animate={true}
    animationDuration={1000}
    animationDelay={500}
    padding={10}
    strokeWidth={3}
>
    带自定义参数的方框注释
</Notation>

参数说明

参数	类型	默认值	说明
type	string	必填	注释类型
color	string	#000000	注释颜色
animate	boolean	true	是否启用动画
animationDuration	number	800	动画持续时间（毫秒）
animationDelay	number	0	动画延迟时间（毫秒）
animationIteration	number	1	动画重复次数
padding	number/array	5	内边距
strokeWidth	number	2	线条宽度
multiline	boolean	false	是否支持多行文本
iterations	number	2	绘制迭代次数
show	boolean	true	是否自动显示
brackets	string[]	[‘right’]	bracket 类型专用，指定括号位置，可选值：left, right, top, bottom

实际应用示例

示例一：高亮关键词

在文章中高亮重要的关键词，让读者更容易抓住重点。

示例二：注释说明

使用括号注释对专业术语进行解释说明：这是一个专业术语。

示例三：强调重点

使用圆圈或方框强调需要特别注意的内容：重要提示。

示例四：动态演示

通过动画效果逐步展示内容，增强用户体验。可以看到上面的示例都有不同的动画延迟，形成了依次展示的效果。

总结

Rough Notation 是一个非常有趣的前端库，它为网页内容增添了独特的手绘风格。无论是在博客文章、演示文稿还是产品介绍中，使用手绘注释都能让内容更加生动、更具吸引力。

在 Astro 项目中，通过封装的 Notation 组件，可以轻松地在任何页面中使用这些手绘注释效果，无需复杂的配置和代码编写。

如果你想在自己的项目中尝试这种有趣的效果，可以参考官方文档 https://roughnotation.com/ 获取更多信息。