react-rough-notation快速上手教程3步在React中实现手绘下划线与荧光笔效果【免费下载链接】react-rough-notationReact wrapper for rough-notation项目地址: https://gitcode.com/gh_mirrors/re/react-rough-notationreact-rough-notation是一款为 React 封装 rough-notation 手绘标注库的轻量组件库只需几行代码就能为页面任意元素添加手绘下划线、荧光笔、方框等笔迹风格的标注。本教程带你3 步完成安装、单个标注与批量动画编排零复杂配置效果开箱即用。✨核心亮点速览 内置 6 种手绘标注样式 自带绘制动画通过show属性随时触发 纯声明式 React 组件安装即用为什么选择 react-rough-notation很多官网和笔记应用会用手绘感标注来强调关键文字。自己实现这套效果要写大量 SVG 与画布代码而 react-rough-notation 把动画逻辑封装成了标准 React 组件优势说明集成简单用RoughNotation包住子内容即可生效动画可控show属性控制显隐想画的时候再画样式可定制颜色、线宽、笔迹遍数、时长均可用 props 调整批量编排RoughNotationGroup实现多元素依次绘制第 1 步一行命令安装 react-rough-notation确认项目使用 React 18 或 19已在 package.json 中声明为 peer 依赖然后执行npm install react-rough-notation从入口 src/index.ts 导入两个核心组件import { RoughNotation, RoughNotationGroup } from react-rough-notation;RoughNotation单个标注组件本教程的主角RoughNotationGroup组容器用于依次播放动画本身不渲染任何 DOM第 2 步一行代码实现手绘下划线show属性控制标注是否出现常见做法是组件挂载后触发绘制动画import { useEffect, useState } from react; import { RoughNotation } from react-rough-notation; export default function App() { const [show, setShow] useState(false); useEffect(() { setShow(true); // 页面就绪后开始画 }, []); return ( h1 RoughNotation typeunderline colorred show{show} 欢迎来到 React /RoughNotation /h1 ); }把typeunderline换成typehighlight就得到荧光笔效果RoughNotation typehighlight coloryellow show{show} 这句话被荧光笔标记过了 /RoughNotation 只想要静态标注、不要动画时加上animate{false}即可。第 3 步用 RoughNotationGroup 编排依次动画需要同时给多个元素加标注时用RoughNotationGroup包裹它们子元素会在上一个绘制完成后自动开画RoughNotationGroup show{show} RoughNotation typeunderlineHello,/RoughNotation RoughNotation typehighlightThis is/RoughNotation RoughNotation typebox order{1}a Test/RoughNotation /RoughNotationGroup自定义顺序很简单给子组件传order带order的按数字升序先画没带的随后按书写顺序画。6 种内置标注类型速查表type 取值手绘效果适用场景underline下划线强调关键词highlight荧光笔标记重点句box方框突出按钮、标签circle椭圆圈模拟手绘圈选strike-through横线划掉标记废弃内容crossed-off双斜线划掉划掉无效选项常用 Props 一览表Prop默认值作用typeunderline标注样式见上表showfalse控制标注显隐color—笔迹颜色animationDuration800动画时长毫秒animationDelay0动画延迟毫秒iterations2描笔遍数越大越潦草strokeWidth1线条宽度padding5文字与标注的间距像素customElementspan渲染的标签名可换成mark等multilinefalse多行文本逐行标注进阶动态修改样式无需重绘颜色、时长、线宽等属性在挂载后直接修改即可标注会自动更新而不会重新绘制涉及 5 个属性animate、animationDuration、color、strokeWidth、padding。⚠️ 唯一例外是type标注类型初始化后不可更换需要从下划线切换为方框时请新建一个标注组件。源码结构导航如果想深入原理可先克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-rough-notation文件作用src/RoughNotation/RoughNotation.tsx核心标注组件负责调用 rough-notation 的annotate并管理动画生命周期src/RoughNotationGroup/RoughNotationGroup.tsx分组组件基于 Context Reducer 实现按顺序依次绘制src/index.ts包导出入口README.md完整文档Props 明细、示例代码常见问题 FAQQ页面初始加载时下划线没出现Ashow默认是false需要在挂载后置为true参考第 2 步示例或手动绑定按钮触发。Q如何让动画重新播放一次A先把show设为false再改回true即可重播绘制动画。Q会不会影响文字点击、选中等交互A组件默认渲染普通span并且会把未声明的 props 全部透传可以直接挂onClick等事件。总结安装react-rough-notation用RoughNotation包住目标文字show控制动画时机需要批量依次标注时交给RoughNotationGroup至此你只需几分钟就能在任何 React 页面加上手绘感下划线与荧光笔效果 ✨【免费下载链接】react-rough-notationReact wrapper for rough-notation项目地址: https://gitcode.com/gh_mirrors/re/react-rough-notation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考