react-rough-notation Props完整参考一张表看懂14个参数的作用与默认值【免费下载链接】react-rough-notationReact wrapper for rough-notation项目地址: https://gitcode.com/gh_mirrors/re/react-rough-notation️react-rough-notation是 rough-notation 的 React 封装库只需几行代码就能给网页文字加上手绘风的下划线、框选、高亮、圈注等标注动画。本文用一张总表 分组讲解带你快速看懂它14 个 Props 参数的作用与默认值新手也能一次配对口吻、少踩坑。30 秒上手最简用法通过 npm 安装后导入两个核心组件即可npm install --save react-rough-notationimport { RoughNotation, RoughNotationGroup } from react-rough-notation; RoughNotation typeunderline show{show} Hello RoughNotation /RoughNotation组件默认渲染为span元素未列出的 prop 会透传给该元素因此任意 React 事件如onClick和样式都能直接使用。14 个 Props 参数一览表参数类型默认值作用说明showbooleanfalse控制标注的显示 / 隐藏切换为true时触发动画type枚举underline标注样式underline/box/circle/highlight/strike-through/crossed-off/bracketanimatebooleantrue是否带动画地绘制标注关闭后直接呈现animationDelaynumber0动画延迟时间单位毫秒animationDurationnumber800动画持续时间单位毫秒iterationsnumber2绘制迭代次数。默认 2 次如先左→右画下划线再右→左画一遍colorstring无标注线条的颜色如#f00、bluestrokeWidthnumber1标注笔触的宽度像素paddingnumber或数组5元素与标注的距离。可传[上, 右, 下, 左]或[上下, 左右]brackets枚举 / 枚举数组right仅bracket样式生效指定框住哪一侧left/right/top/bottommultilinebooleanfalse对多行文本按每一行分别标注仅行内文本生效customElementstringspan外层包裹元素的标签名可换成p、div等ordernumber/string无在RoughNotationGroup中指定该标注的播放顺序getAnnotationObjectfunction空函数标注初始化后的回调可拿到 annotation 对象调用show()/hide()等方法 类型定义可在 types.ts 中查看RoughNotationProps接口完整列出了这些参数。分组细说每个参数什么时候用 控制类show、type、animateshow是最常用的开关把它绑定到 state点击按钮切换即可反复播放 / 隐藏标注type决定标注长相6 种内置样式各有用途underline下划线、box方框、circle圆圈、highlight荧光笔高亮、strike-through删除线、crossed-off双斜线划掉animate设为false时标注瞬间出现适合静态强调场景。⚠️ 注意type初始化后不能改变想换样式需要新建一个标注。⏱️ 动画类animationDelay、animationDuration、iterations三者组合控制什么时候画、画多久、画几遍。默认800ms的时长 2次迭代就是那种手绘两笔的丝滑效果想要更潦草的手写感把iterations调到3试试。 外观类color、strokeWidth、padding、brackets这 4 个参数负责长什么样颜色、粗细、留白距离以及bracket样式挂在元素哪一侧。padding支持 CSS 风格的数组写法例如padding{[10, 5]}表示上下 10px、左右 5px。 结构与回调customElement、multiline、order、getAnnotationObjectcustomElement默认包span需要块级或别的语义标签时可自定义multiline长段落按行逐行标注的关键开关order配合分组组件实现自定义播放顺序getAnnotationObject需要精细控制如监听isShowing()、手动remove()时通过它拿到底层 annotation 对象。哪些 Props 可以热更新以下 5 个参数在初始化后直接修改即可生效无需重新渲染标注可动态更新的 PropanimateanimationDurationcolorpaddingstrokeWidth例如想实时换标注颜色只改color的 state 就行。该逻辑在 RoughNotation.tsx 的useEffect中同步到底层对象。配合 RoughNotationGroup 控制播放顺序RoughNotationGroup本身不渲染任何 HTML 元素它会让多个子标注按顺序依次播放——前一个动画结束后再触发下一个。给每个子标注加上order即可自定义顺序例如实现倒序下划线RoughNotationGroup show{show} RoughNotation typeunderline order3Hello,/RoughNotation RoughNotation typeunderline order2This is/RoughNotation RoughNotation typeunderline order1a Test/RoughNotation /RoughNotationGroup排序规则先播带order的按数值升序再播不带的。排序与排队逻辑可参考 RoughNotationGroup.tsx。核心源码位置速查文件说明src/RoughNotation/RoughNotation.tsx主组件实现含所有默认值与热更新逻辑src/RoughNotation/types.tsRoughNotationProps与Annotation类型定义src/RoughNotationGroup/RoughNotationGroup.tsx分组组件与顺序调度实现README.md官方使用说明与参数文档小结掌握这张表就够用了show控开关type定样式动画三件套animationDelay/animationDuration/iterations调节奏外观四件套color/strokeWidth/padding/brackets管颜值剩下customElement、multiline、order、getAnnotationObject按需取用。祝你的页面手绘感拉满 ✍️【免费下载链接】react-rough-notationReact wrapper for rough-notation项目地址: https://gitcode.com/gh_mirrors/re/react-rough-notation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考